/********************************/
//    Dynamic Dependant Project
//    GUI Stuff
//    Requires the foundation code
/********************************/


var ddp;
if(!ddp) ddp = {};
ddp.gui = {};

/********************************/
//    DDP -> GUI
/********************************/


(function() {
var directoryLocation = "ddp/"; // "ddp/"
ddp.f.addLinkStyleSheet(directoryLocation+'ddp.gui.css');

//var scriptPath = (ddp.c && ddp.c.scriptPath) ? ddp.c.scriptPath : '';
//ddp.f.addLinkStyleSheet(scriptPath + 'ddp.gui.css');


/*Infobox Display Types - makes for quick settings
 * type: 1,* grey out background, centered box on screen, off box click to hide, sizes to content (*this is the default type)
 * type: 2, grey out background, not centered
 * type: 3, no grey out, centered
 * type: 4, no grey out, not centered
 * 
 */
function infobox()
{
	this.ibthis = this;
	this.type=1;
	this.posx=0;
	this.posy=0;
	this.width=null;
	this.height=null;
	this.cssstyle='ddpinfoboxdark'
	this.greyout = true; //grey out the background
	this.center = true; //center the box on the screen
	this.showinscreen = true; //force the box to be inside the visible window
	this.grouping = true; //groups images with the same "rel" tags for next previous abillity
	this.caption = true; //display a caption at the bottom
	this.groupbuttons = true; //display next and previous buttons for grouped images
	this.disablegreyoutclick = false; //if true, don't close the popup by clicking the the grey area
	this.closebutton = true;
	
	this.csu = 0;
	
	this.ws = ddp.f.getBrowserGeometry();
	
	this.browserdt = new ddp.f.BrowserDetect();
	
}

infobox.prototype = {
	
	setArguments: function(options)
	{
		if(typeof options == "undefined") options = {};
		
		var default_args = {
		'type': 1,
		'posx': 0,
		'posy': 0,
		'width': null,
		'height':null,
		'cssstyle':'ddpinfoboxdark',
		'greyout':true,
		'center':false, 
		'showinscreen':true,
		'grouping':true,
		'caption':true,
		'groupbuttons':true,
		'disablegreyoutclick':false,
		'closebutton':true
		}

		for(var index in default_args) {
			if(typeof options[index] == "undefined") options[index] = default_args[index];
		}

		this.type = options['type'];
		this.posx = options['posx'];
		this.posy = options['posy'];
		this.width = options['width'];
		this.height = options['height'];
		this.cssstyle = options['cssstyle'];
		this.greyout = options['greyout'];
		this.center = options['center'];
		this.showinscreen = options['showinscreen'];
		this.grouping = options['grouping'];
		this.caption = options['caption'];
		this.groupbuttons = options['groupbuttons'];
		this.disablegreyoutclick = options['disablegreyoutclick'];
		this.closebutton = options['closebutton'];
		
	},
	
    displayContent: function(content,options)
    {
		this.setArguments(options);
        content = (typeof content == "undefined")?' ':content
        this.show(content,null);
    },
    
	displaySrc: function(src,options)
    {       
		this.setArguments(options);
		var pagesrc = (typeof src == "undefined")?' ':src;
        this.show("",pagesrc);
    },
	
	displayImg : function(imgobj)//takes object: <a href="img.jpg"></a>
	{
		var controls = "";
		
		imgPreload = new Image();
		imgPreload.src = imgobj.href;
		imgPreload.alt = imgobj.getAttribute('title');
		
		var objContainer = document.createElement("div");
		
		var objFooter = document.createElement("div");
		ddp.f.setClass(objFooter ,'footer');
		objFooter.style.width = (imgPreload.width - 60) + "px";
		
		if(this.caption)
		{
			if(imgPreload.alt)
			controls += "<span>"+imgPreload.alt+"</span>";
			if (this.grouping)
				controls += "<BR>";
		}

		if (this.grouping) {
			controls += "<span style=\"color: rgb(204, 204, 204);\">Image "+ (parseInt(imgobj.cur)+1) +" of "+ (parseInt(imgobj.total)+1) +"</span> ";
			
			var nn = null;
			var prv = null;
			
			if (imgobj.cur > 0) {
				
				nn = parseInt(imgobj.cur) - 1;
				prv = imgobj.rel + nn;
				if (!this.groupbuttons) {
					controls += "<span class=\"np\" onclick=\"ddp.f.$('" + prv + "').onclick()\">< Previous</span>";
					if (imgobj.cur < imgobj.total) 
						controls += " | ";
				}
			}
			if (imgobj.cur < imgobj.total) {
				
				nn = parseInt(imgobj.cur) + 1;
				nxt = imgobj.rel + nn;
				if(!this.groupbuttons)
					controls += "<span class=\"np\" onclick=\"ddp.f.$('" + nxt + "').onclick()\">Next ></span>";	
			}
			
			objFooter.innerHTML = controls;
			
			if(this.groupbuttons)
			{			
					var prevBtn = document.createElement('span');
					prevBtn.setAttribute('id', 'InfoboxPrevBtn');
					prevBtn.style.position = 'absolute';
					prevBtn.style.cursor = 'pointer';
					prevBtn.style.right = '30px';
					prevBtn.style.bottom = '10px';

					if (this.browserdt.browser == 'Explorer' && this.browserdt.version < 8) 
						prevBtn.innerHTML = "<img src=\"" + directoryLocation + "prevbtn.gif\">";
					else 
						prevBtn.innerHTML = "<img src=\"" + directoryLocation + "prevbtn.png\">";
						
					var nextBtn = document.createElement('span');
					nextBtn.setAttribute('id', 'InfoboxNextBtn');
					nextBtn.style.position = 'absolute';
					nextBtn.style.right = '10px';
					nextBtn.style.bottom = '10px';
					nextBtn.style.cursor = 'pointer';
					nextBtn
					if (this.browserdt.browser == 'Explorer' && this.browserdt.version < 8) 
						nextBtn.innerHTML = "<img src=\"" + directoryLocation + "nxtbtn.gif\">";
					else 
						nextBtn.innerHTML = "<img src=\"" + directoryLocation + "nxtbtn.png\">";
			
				if (imgobj.cur < imgobj.total)
					nextBtn.onclick = function(){ddp.f.$(nxt).onclick()};
				else
				{
					nextBtn.style.cursor = null;
					nextBtn.onclick = null;
					nextBtn.style.filter = 'alpha(opacity=20)';
					nextBtn.style.opacity = '.20';
				}
				
				if (imgobj.cur > 0) 
					prevBtn.onclick = function(){ddp.f.$(prv).onclick()};
				else
				{
					prevBtn.style.cursor = null;
					prevBtn.onclick = null;
					prevBtn.style.filter = 'alpha(opacity=20)';
					prevBtn.style.opacity = '.20';
				}
				
				objFooter.appendChild(nextBtn);
				objFooter.appendChild(prevBtn);
				
			}
			else
			{
			
			}
		}
		
		
		
		objContainer.appendChild(imgPreload);
		
		objContainer.appendChild(objFooter);
		
		
		
		var ibthis = this;
		
		if (imgPreload.complete) {
			ibthis.show(objContainer, null);
		}
		else 
			imgPreload.onload = function(){
				ibthis.show(objContainer, null);
			}
	
	},
	
	displayIframe : function(src,options)
	{
		this.setArguments(options);	
	
		var iframeContainer = document.createElement("iframe");
		iframeContainer.setAttribute('id', 'ddpinfoboxiframe');
		ddp.f.setClass(iframeContainer,'ddpinfoboxiframe'); 
		iframeContainer.src = src;
		iframeContainer.style.width = "100%";
		iframeContainer.style.height = this.height + "px";
		this.show(iframeContainer,null);		
	},
	
	
    show: function(content,src)
    {    

		
		this.csu = 0;
	
        var maxZindex = ddp.f.returnMaxZindex();
        maxZindex++;
        
        var objInfobox = ddp.f.$('ddpinfobox');
        var objInfoboxContent = ddp.f.$('ddpinfoboxcontent');
		
		//there might be a timer used to position center the box, remove it.
		if(objInfobox.timer)clearTimeout(objInfobox.timer);

		if (this.width != null)
			objInfobox.style.width = this.width + "px";
		else
			objInfobox.style.width = null;			
		if(this.height)
			objInfobox.style.height = this.height + "px";		
		else
			objInfobox.style.height = null;
		
		objInfoboxContent.innerHTML = "Loading...";
        
        objInfobox.style.zIndex = maxZindex;
        
		if (content.constructor == String) {
		
			if (src == null) 
				objInfoboxContent.innerHTML = content;
			else {
				ddp.a.HTTPRequest('get', src, null, function(data){
					objInfoboxContent.innerHTML = data;
				}, null, 'text');
				
			}
		}
		else
		{
			objInfoboxContent.innerHTML = "";
			objInfoboxContent.appendChild(content);
		}
		switch(this.type)
		{
			case 1:
				this.greyout = true;
				this.center = true;
			break;
			case 2:
				this.greyout = true;
				this.center = false;
			break;
			case 3:
				this.greyout = false;
				this.center = true;
			break;
			case 4:
				this.greyout = false;
				this.center = false;
			break;
		}
		
		if (this.greyout) {
			this.ws = ddp.f.getBrowserGeometry();
			var objOverlay = ddp.f.$('ddpoverlay');
			// set height of Overlay to take up whole page
			if (this.ws.documentHeight < this.ws.viewportHeight) 
				objOverlay.style.height = (this.ws.viewportHeight + 'px');
			else 
				objOverlay.style.height = (this.ws.documentHeight + 'px');
			
			//objOverlay.style.width = (this.ws.viewportWidth + 'px');
			objOverlay.style.display = 'block';
			
			
            
            if (this.disablegreyoutclick == false) {
            
                objOverlay.onclick = function(){
                    objInfobox.style.display = 'none';
                    objOverlay.style.display = 'none';
                    return false;
                    
                }
            }
			else {
				objOverlay.onclick = null;
			}
			
		}
		
		 if (this.closebutton) {
            var closeBtn = document.createElement('span');
            closeBtn.setAttribute('id', 'InfoboxCloseBtn');
            if (this.greyout) {
            
            
                closeBtn.onclick = function(){
					  if(ddp.f.$('ddpinfoboxcontent'))
					   	ddp.f.$('ddpinfoboxcontent').innerHTML = "";
					  if(ddp.f.$('ddpinfoboxiframe'))
					   	ddp.f.$('ddpinfoboxiframe').src = "";
                    objInfobox.style.display = 'none';
                    objOverlay.style.display = 'none';
                    return false;
                }
                
                
            }
            else {
            
                closeBtn.onclick = function(){
					 if(ddp.f.$('ddpinfoboxcontent'))
					   	ddp.f.$('ddpinfoboxcontent').innerHTML = "";
					  if(ddp.f.$('ddpinfoboxiframe'))
					   	ddp.f.$('ddpinfoboxiframe').src = "";
                    objInfobox.style.display = 'none';
                    return false;
                }
                
            }
            closeBtn.style.cursor = 'pointer';
            closeBtn.style.right = '-13px';
            closeBtn.style.top = '-13px';
            closeBtn.style.position = 'absolute';
            
            if (this.browserdt.browser == 'Explorer' && this.browserdt.version < 8) 
                closeBtn.innerHTML = "<img style=\"position:relative;\" src=\"" + directoryLocation + "closebtnrnd.gif\">";
            else 
                closeBtn.innerHTML = "<img style=\"position:relative;\" src=\"" + directoryLocation + "closebtnrnd.png\">";
            
            
			ddp.f.$('ddpinfoboxclsholder').appendChild(closeBtn);
        }
		
		
		
		
		objInfobox.style.display = 'block';

		
		
		if(this.center)
		{			
			this.checkSizeUpdate(objInfobox);
			this.positionCenter(objInfobox);
		}
		else
		{
			this.positionWindow(objInfobox);		
		}
  
    }, 
	
	close : function()
	{
		 if(ddp.f.$('ddpinfoboxcontent'))
			ddp.f.$('ddpinfoboxcontent').innerHTML = "";
		if(ddp.f.$('ddpinfoboxiframe'))
			ddp.f.$('ddpinfoboxiframe').src = "";
		
       var objInfobox = ddp.f.$('ddpinfobox');
		
		if (this.greyout) {
        
            objInfobox.style.display = 'none';
            ddp.f.$('ddpoverlay').style.display = 'none';
            return false;
            
        }
        else {
        
            objInfobox.style.display = 'none';
            return false;
        }
	},
	
	checkSizeUpdate : function(ibobj)
	{		
		var ibthis = this;
		if(ibobj.timer)clearInterval(ibobj.timer);
		 var ibl=ibobj.style.left;
		 ibobj.timer=setInterval(function(){		 	
			if(ibobj.style.left != ibl)
			{
				ibthis.positionCenter(ibobj);				
			}
			ibthis.csu++;
			if(ibthis.csu > 50) clearTimeout(ibobj.timer);
		},100)
	},
	
	positionCenter : function(obj)
	{
		this.ws = ddp.f.getBrowserGeometry(); //update the position information
		var ibTop = this.ws.verticalScroll + ((this.ws.viewportHeight - obj.offsetHeight) / 2);
		var ibLeft = ((this.ws.viewportWidth  - obj.offsetWidth) / 2);
		obj.style.top = (ibTop < 0) ? "0px" : ibTop + "px";
		obj.style.left = (ibLeft < 0) ? "0px" : ibLeft + "px";
	},
	
	positionWindow : function(obj)
	{
		if (this.showinscreen) {
			//check to make sure its not going to display outside the current view area		
			var objbottom = this.posy + obj.offsetHeight;
			var objright = this.posx + obj.offsetWidth;
			if (objbottom > this.ws.viewportHeight) 
				this.posy = this.ws.viewportHeight - obj.offsetHeight;
			if (objright > this.ws.viewportWidth) 
				this.posx = this.ws.viewportWidth - obj.offsetWidth - 15;
			obj.style.top = this.posy +"px";
			obj.style.left = this.posx +"px";
		}
		else
		{
			obj.style.top = this.posy +"px";
			obj.style.left = this.posx +"px";
		}
		
	},
    
    create : function(options)
    {    
		this.setArguments(options);
		
        var objBody = document.getElementsByTagName("body").item(0);
        
        var objInfobox = document.createElement("div");
        
     
        objInfobox.setAttribute('id', 'ddpinfobox');
		ddp.f.setClass(objInfobox,this.cssstyle); 
         

        var clsholder = document.createElement('div');
		clsholder.id = "ddpinfoboxclsholder";
		
        objInfobox.appendChild(clsholder);
	
        var objInfoboxContent = document.createElement("div");
		ddp.f.setClass(objInfoboxContent,'inside');
        
        objInfoboxContent.id = "ddpinfoboxcontent";
        
		clsholder.appendChild(objInfoboxContent);

        objBody.insertBefore(objInfobox, objBody.firstChild);
		
		//insert the grey background if requried - show is the default setting
		if(this.greyout)
		{
			var objBody = document.getElementsByTagName("body").item(0);
		
			var objOverlay = document.createElement("div");
			objOverlay.setAttribute('id', 'ddpoverlay');
			objOverlay.style.display = 'none';
			objOverlay.style.position = 'absolute';
			objOverlay.style.top = '0';
			objOverlay.style.left = '0';
			objOverlay.style.zIndex = '90';
			objOverlay.style.width = '100%';
			objOverlay.style.backgroundColor = '#000';
			objOverlay.style.filter = 'alpha(opacity=75)';
			objOverlay.style.opacity = '.75';
			objBody.insertBefore(objOverlay, objBody.firstChild);
		}	
    },
	
	//Make links that have attribute of <rel = "???"> open into the infobox
	// <a href="http://www.linktophotos.com/photo.jpg" rel="myreltag">Thumbnail or similar</a>
	// var ib = new ddp.gui.infobox;
	// ib.create(); //can take optional arguments array such as "{grouping:false}"
	// ib.attachToPhotos('myreltag');
	attachToPhotos : function(rel)
	{
		ibObj = this.ibthis;
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName("a");
	
		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++)
		{
			
			var anchor = anchors[i];			
			var myrel = rel;
			var idrel = rel + i;
			if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == rel))
			{	
				anchor.setAttribute('id',idrel);
				anchor.cur = i;
				anchor.total = anchors.length - 1;
				anchor.rel = myrel;
				anchor.onclick = function () {ibObj.displayImg(this); return false;}
				
			}
		}

	}
	
	


}





/**************************************************/
//addDateFieldButtons
//
function addDateFieldButtons(strNameOfClass){
	var dateFields = getElementsByClassName(strNameOfClass);
	for(var i=0, l=dateFields.length; i<l; i++){
		dateFields[i].title = '(default date format dd-mmm-yyyy)';
		
		var elCalendarButton = document.createElement('INPUT');
		elCalendarButton.title = 'Choose the date from a calendar';
		elCalendarButton.type = 'button';
		elCalendarButton.className = 'calendarButton';

		addEvent(elCalendarButton, 'click', function(e){showCalendarControl(getEventTarget(e).previousSibling); });
		
		insertElementAfter(elCalendarButton, dateFields[i]);
		
		addEvent(dateFields[i], 'keypress', function(e){return inputFilter('date', e);});
		addEvent(dateFields[i], 'blur', function(e){validateAndReformat(getEventTarget(e));});
	}
}

ddp.gui.CalendarControl = CalendarControl;

function CalendarControl(){
  //store month names, fr and en
  var arMonthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var arFrenchMonthNames = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Séptembre','Octobre','Novembre','Décémbre'];
  
  //set the default dates to today's date
  var dtTmp = new Date();
  var currentYear = dtTmp.getFullYear();
  var currentMonth = dtTmp.getMonth() + 1;
  var currentDay = dtTmp.getDate();
  
  var selectedYear = 0;
  var selectedMonth = 0;
  var selectedDay = 0;
  
  //creat the container element
  var elContainer = document.createElement('div');
  elContainer.style.display = 'none';
  elContainer.style.width = '200px';
  elContainer.style.height = '200px';
  //elContainer.style.border = 'solid 1px #000000';
  elContainer.className = 'ddpCalendarControl';
  elContainer.appendChild(document.createElement('div')); //temp element so we can replace it
  ddp.f.addEvent(document.getElementsByTagName('body')[0], 'mouseout', function(objEvent){
    console.log(ddp.f.isChild(ddp.f.getEventTarget(objEvent), elContainer));
    //if(this == ddp.f.getEventTarget(objEvent)){
//      hide();
    //}
  });
  
  var elFrame = null;
  var objBD = new ddp.f.BrowserDetect();
  if(1==1 ||objBD.browser=='Explorer' && objBD.version < 7){
    elFrame = document.createElement('iframe');
    elFrame.className = 'ddpCalendarControlIFrame';
    elFrame.style.position = 'absolute';
    elFrame.style.display = 'none';
    elFrame.src = 'javascript: false;';
    elFrame.frameBorder = '0';
    elFrame.frameSpacing= '0';
    elFrame.marginHeight= '0';
    elFrame.marginWidth= '0';
  }
  
  //attach the calendar to the document body
  ddp.f.addEvent(document, 'ready', function(){
    //detect and add the proper style sheet if nessessary
    var elBody = document.getElementsByTagName('body')[0];
    if(elFrame)
      elBody.appendChild(elFrame);
    elBody.appendChild(elContainer);
  });
  
  this.show=function(elElement){
    var dtSelected = null;
    
    if(elElement && elElement.value)
      dtSelected = ddp.f.parseDateString(elElement.value);
    
    if(dtSelected){
      selectedYear = dtSelected.getFullYear();
      selectedMonth = dtSelected.getMonth() + 1;
      selectedDay = dtSelected.getDate();
      createTable(selectedYear, selectedMonth, elElement);
    }
    else
      createTable(currentYear, currentMonth, elElement);

    //position the calander
    //----------------------------
    elContainer.style.top = '200px';
    elContainer.style.left = '200px';
    //----------------------------
    
    if(elFrame){
      elFrame.style.top = elContainer.style.top;
      elFrame.style.left = elContainer.style.left;
      elFrame.style.width = elContainer.style.width;
      elFrame.style.height = elContainer.style.height;
      elFrame.style.display = 'block';
    }
    elContainer.style.display = 'block';
  };
  
  function hide(){
    selectedYear = 0;
    selectedMonth = 0;
    selectedDay = 0;
    if(elFrame)
      elFrame.style.display = 'none';
    elContainer.style.display = 'none';
  }
  this.hide=hide;
  
  function getDaysInMonth(month, year){
    if(!year){
      var tdTmp = new Date();
      year = tdTmp.getFullYear();
    }
    return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
  }

  function createTable(displayYear, displayMonth, elElement){
    displayYear = parseInt(displayYear);
    displayMonth = parseInt(displayMonth);
    
    if(displayMonth>12){
      displayMonth = 1;
      displayYear++;
    }
    if(displayMonth<1){
      displayMonth = 12;
      displayYear--;
    }
    var dtTmp = new Date(displayYear, displayMonth-1, 1)
    var startDayOfWeek = dtTmp.getDay();
    var daysInMonth = getDaysInMonth(displayMonth, displayYear);
    var elNewTable = document.createElement('table');
    var elTableBody = document.createElement('tbody');
    /*
    elNewTable.style.border = 'solid 1px #000000';
    elNewTable.style.height='100%';
    elNewTable.style.width='100%';
    */
    elNewTable.cellspacing='0';
    elNewTable.cellpadding='0';
    elNewTable.borderCollapse = 'collapse';
    elNewTable.border='0';
    elNewTable.style.borderSpacing = '0';
    
    var elTR = document.createElement('tr');
    elTR.className = 'header';

    var elTD = document.createElement('td');
    elTD.title='Previous Year';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('<'));
    ddp.f.addEvent(elTD, 'click', function(){ createTable(displayYear-1, displayMonth, elElement); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);

    var elTD = document.createElement('td');
    elTD.setAttribute('colSpan', '5');
    var elSelect = document.createElement('select');
    for(var y=displayYear+10; y>=displayYear-10; y--){
      elSelect.options[elSelect.options.length] = new Option(y, y);
    }
    elSelect.value = displayYear;

    ddp.f.addEvent(elSelect, 'change', function(){ createTable(this.value, displayMonth, elElement); });
    elTD.appendChild(elSelect);
    elTR.appendChild(elTD);

    var elTD = document.createElement('td');
    elTD.title='Next Year';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('>'));
    ddp.f.addEvent(elTD, 'click', function(){ createTable(displayYear+1, displayMonth, elElement); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);
    
    elTableBody.appendChild(elTR);
   
    var elTR = document.createElement('tr');
    elTR.className = 'header';
    
    var elTD = document.createElement('td');
    elTD.title='Previous Month';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('<'));
    ddp.f.addEvent(elTD, 'click', function(){ createTable(displayYear, displayMonth-1, elElement); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);

    var elTD = document.createElement('td');
    elTD.setAttribute('colSpan', '5');
    var elSelect = document.createElement('select');
    for(var i=0; i<12; i++){
      elSelect.options[elSelect.options.length] = new Option(arMonthNames[i],i+1);
    }
    elSelect.value = displayMonth;
    ddp.f.addEvent(elSelect, 'change', function(){ createTable(displayYear, this.value, elElement); });
    elTD.appendChild(elSelect);
    elTR.appendChild(elTD);

    var elTD = document.createElement('td');
    elTD.title='Next Month';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('>'));
    ddp.f.addEvent(elTD, 'click', function(){ createTable(displayYear, displayMonth+1, elElement); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);
    
    elTableBody.appendChild(elTR);
    
    var elTR = document.createElement('tr');
    elTR.className = 'header';
    
    var arDayNames = ['Su', 'Mo','Tu','We','Th','Fr','Sa'];
    var arDayNamesFrench = ['Di', 'Lu','Ma','Me','Je','Ve','Sa'];
    for(var i=0;i<7;i++){
      var elTD = document.createElement('td');
      elTD.appendChild(document.createTextNode(arDayNames[i]));
      elTR.appendChild(elTD);
    }
    elTableBody.appendChild(elTR);
    
    
    var dayOfMonth = 1;
    
    for(var week=0; week<6; week++){
      var elTR = document.createElement('tr');
      for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++){
        var elTD = document.createElement('td');
        
        if( (week==0 && dayOfWeek>=startDayOfWeek) || (week>0 && dayOfMonth<=daysInMonth) ){
          if(dayOfMonth == selectedDay && displayYear == selectedYear && displayMonth == selectedMonth)
            elTD.className = 'selected';
          else if(dayOfMonth == currentDay && displayMonth == currentMonth && displayYear == currentYear)
            elTD.className = 'current';
          else if (dayOfWeek == 0 || dayOfWeek == 6)
            elTD.className = 'weekend';
          else
            elTD.className = 'weekday';
          elTD.appendChild(document.createTextNode(dayOfMonth));
          elTD.currentYear = displayYear;
          elTD.currentMonth = displayMonth;
          elTD.dayOfMonth = dayOfMonth;
          elTD.title = ddp.f.dateFormat(displayMonth, dayOfMonth, displayYear, 1);
          ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'cellHover');});
          ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'cellHover');});
          ddp.f.addEvent(elTD, 'click', function(){
            if(elElement)
              elElement.value = ddp.f.dateFormat(this.currentMonth, this.dayOfMonth, this.currentYear, (elElement && elElement.ddpCalendarDateFormat) ? elElement.ddpCalendarDateFormat: 1);
            hide();
          });
          dayOfMonth++;
        }
        else{
          elTD.className = 'empty';
          //elTD.appendChild(document.createTextNode(' '));
          elTD.innerHTML = '&nbsp;';
        }
        
        elTR.appendChild(elTD);
        //if(week==4 && dayOfWeek==6 && dayOfMonth>daysInMonth)
        //  week = 6;
      }
      elTableBody.appendChild(elTR);
    }
    elNewTable.appendChild(elTableBody);

    var elTR = document.createElement('tr');
    elTR.className='header';
    
    var elTD = document.createElement('td');
    elTD.setAttribute('colSpan', '3');
    elTD.title='Clear The Date Input';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('Clear'));
    ddp.f.addEvent(elTD, 'click', function(){ if(elElement) elElement.value = ''; hide(); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);
    
    var elTD = document.createElement('td');
    elTD.className = 'emptyd';
    elTD.appendChild(document.createTextNode(' '));
    elTR.appendChild(elTD);
    
    var elTD = document.createElement('td');
    elTD.setAttribute('colSpan', '3');
    elTD.title='Close The Calendar';
    elTD.className = 'selectionButton';
    elTD.appendChild(document.createTextNode('Close'));
    ddp.f.addEvent(elTD, 'click', function(){ hide(); });
    ddp.f.addEvent(elTD, 'mouseover', function(){ddp.f.addClass(this, 'selectionButtonHover');});
    ddp.f.addEvent(elTD, 'mouseout', function(){ddp.f.removeClass(this, 'selectionButtonHover');});
    elTR.appendChild(elTD);
    
    elTableBody.appendChild(elTR);
    
    //table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'title='Clear the date field'>Clear</a> | <a href='javascript:hideCalendarControl();'title='Close the calendar'>Close</a></td></tr>";
    //table = table + "</table>";
    
    elContainer.replaceChild(elNewTable, elContainer.firstChild);

    return true;
  }
  
}


/**************************************************/
//Export the public functions to a public namespace
/**************************************************/

var ddpns = ddp.gui;
ddpns.infobox = infobox;

})();