// JavaScript Document
//created by dan, inspired by vista
var mooLander = new Class({
	'defaultDate': null,
	'leadingZero': true,
	'twoDigitYear': false,
	'separator': '/',
	'format': 'm/d/y',
	'alignX': 'right',
	'alignY': 'inputTop',
	'offset': { 'x': 0, 'y': 0 },
	'style': '',
	'ieTransitionColor' : '#ffffff',
	'toggleDuration': 750,
	
	initialize: function(elem, option) {
		if(option) Object.append(this, option);
		this.element = $(elem);
		if(!this.element) throw 'No element found to create a datepicker';
		
		this.dayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
		this.monthLabels=['Jan', 'Feb', 'Mar', 'Apr',
                     'May', 'Jun', 'Jul', 'Aug', 'Sep',
                     'Oct', 'Nov', 'Dec'];
		this.daysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		
		
		//Create the picker and calendar and inject in in the body
		this.picker = new Element('div', { 'class': 'vlaCalendarPicker'}).inject((this.container!="" ? $(this.container) : $(document.body)),"top");
		if (this.style!='') {
			this.picker.setStyles(this.style);
		}
		this.animationelement = new Element('div', { 'class': 'vlaCalendarPicker animationelement ' + (this.style != '' ? ' ' + this.style : '') }).inject((this.container!="" ? $(this.container) : $(document.body)),"top");
		
		this._date=(this.prefillDate ? new Date(this.prefillDate['year'],(this.prefillDate['month']-1),this.prefillDate['day']) : new Date);
		this._prefilldate=(this.prefillDate ? new Date(this.prefillDate['year'],(this.prefillDate['month']-1),this.prefillDate['day']) : new Date);
		//Add events for showing and hiding the picker
		var me = this;
		(this.openWith ? $(this.openWith) : this.element)
			.addEvent('focus',  function() { me.toggleDisplay() })
			.addEvent('click',  function() {  })
			.addEvent('change', function() {  })
			.addEvent('keypress', function(e) {if (e.key == "tab") {
				me.toggleDisplay()
			}});
		
		//If the datepicker is visible an outside click makes it hide
		document.addEvent('mousedown', function(e) { if(me.visible && me.outsideClick(e, me.picker)) me.toggleDisplay() });
		this.visible = false;
	},
	
	//Position the picker
	position: function() {
		var top, left;
		
		switch(this.alignX) {
			case 'left':
				left = this.element.getLeft();
				break;
			case 'center':
				var pickerMiddle = this.pickerContent.getStyle('width').toInt() / 2;
				if(pickerMiddle == 0) pickerMiddle = 83;
				left = this.element.getLeft() + (this.element.getSize().x / 2) - pickerMiddle -
						((parseInt(this.pickerContent.getStyle('padding-left')) + parseInt(this.pickerContent.getStyle('padding-right'))) / 2);
				break;
			case 'right': default:
				left = this.element.getLeft() + this.element.getSize().x;
				break;
		}
		
		switch(this.alignY) {
			case 'bottom':
				top = this.getPos(this.element).y + this.element.getSize().y;
				break;
			case 'top': 
				top = this.getPos(this.element).y - parseInt(this.pickerContent.getStyle('height')) - 
					(parseInt(this.pickerContent.getStyle('padding-top')) + parseInt(this.pickerContent.getStyle('padding-bottom')));
				break;
			case 'inputTop': default:
				top = this.getPos(this.element).y;
		}
		
		if(this.isNumber(this.offset.x)) left += this.offset.x;
		if(this.isNumber(this.offset.y)) top += this.offset.y;
		this.picker.setStyles({ 'top': top, 'left': left });
	},
	
	toggleDisplay: function() {
		var me = this;
		//if(Browser.Engine.trident5) this.picker.setStyle('background-color', this.ieTransitionColor); //Ugly transition fix for IE7
		if(!this.visible) {
			this.position();
			this.buildCalendar();
			this.picker.setStyles({ 'opacity': 0, 'display': 'inline' });
			$(this.container).setStyle('display','block');
			
			
			var c = this.picker.getPosition();
			new Element("div", {
	            "class": "vlaCalendarShadow",
	            styles: {
	                left: (c.x-8),
	                top: (c.y-8),
	                width: (parseInt(this.picker.getStyle('width'))+20)+"px",
	                height: (parseInt(this.picker.getStyle('height'))+20)+"px",
	                zIndex: 100
	            }
			}).inject(document.body)
			
			
		}
		else {
			me.animatePicker('fadeOut');
			$(this.container).setStyle('display','none');
			$$(".vlaCalendarShadow").each(function(el){el.dispose()})
			//this.picker.set('tween', { onComplete: function() { me.picker.setStyle('display', 'block'); }, duration: this.toggleDuration }).fade('out');
		}
		this.visible = !this.visible;
	},
	

	buildCalendar: function() {
		var me = this;
		var month=this._date.getMonth();
		var year=this._date.getFullYear();
		var firstDay = new Date(year, month, 1);
		var startingDay = firstDay.getDay();
		var monthLength = this.daysInMonth[month];
		if (month == 1) { // February only!
		  if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
		    monthLength = 29;
		  }
		}
		
		
		var lastmonth=(month-1<0 ? 11 : month-1);
		var lastyear=(month-1<0 ? year-1 : year);
		var lastmonthLength=this.daysInMonth[lastmonth];
		var nextmonth=(month+1>11 ? 0 : month+1);
		var nextyear=(month+1>11 ? year+1 : year);
		var nextmonthLength=this.daysInMonth[nextmonth];
		
		
		//alert(lastmonth+"/"+lastyear+" :: "+month+"/"+year+" :: "+nextmonth+"/"+nextyear);
		var monthName = this.monthLabels[month];
		var html = '';
		//html += '<div class="vlaCalendar">';
		html += '<table class="calendar-table">';
		html += '<tr><th id="monthLT'+this.element.get('id')+'" class="previous">&laquo;</th><th colspan="5" id="monthHeading'+this.element.get('id')+'">';
		html +=  monthName + "&nbsp;" + year;
		html += '</th><th id="monthGT'+this.element.get('id')+'" class="next">&raquo;</th></tr>';
		html += '<tr class="calendar-header">';
		for (var i = 0; i <= 6; i++ ){
		  html += '<td class="calendar-header-day">';
		  html += this.dayLabels[i];
		  html += '</td>';
		}
		html += '</tr><tr class="calendar-days">';
		// fill in the days
		  var day = 1;
		  var nextday=1;
		  // this loop is for is weeks (rows)
		  for (var i = 0; i < 9; i++) {
		    // this loop is for weekdays (cells)
		    for (var j = 0; j <= 6; j++) { 
		      if (day <= monthLength && (i > 0 || j >= startingDay)) {
			  	if (day==this._prefilldate.getDate() && this._prefilldate.getMonth()==this._date.getMonth() && this._prefilldate.getFullYear()==this._date.getFullYear()) {
					html += '<td class="calendar-day" style="background:#DDDDDD" title="'+year+'-'+(month+1)+'-'+day+'">';
				}
				else {
					html += '<td class="calendar-day" title="'+year+'-'+(month+1)+'-'+day+'">';
				}
		        html += day;
		        day++;
		      }
			  else {
			  	if (i == 0) {
					var lastday = (lastmonthLength - (startingDay + (j * -1) - 1));
					html += '<td class="calendar-day" style="color:#ccc" title="' + lastyear + '-' + (lastmonth+1) + '-' + lastday + '">';
					html += lastday;
				}
				else {
					html += '<td class="calendar-day" style="color:#ccc" title="' + nextyear + '-' + (nextmonth+1) + '-' + nextday + '">';
					html += nextday;
					nextday++;
				}
			  }
		      html += '</td>';
		    }
		    // stop making rows if we've run out of days
		    if (day > monthLength) {
		      //break;
			  if (i<5) {
			  	html += '</tr><tr class="calendar-days">';
				 for (var j = 0; j <= 6; j++) {
				 	html += '<td class="calendar-day" style="color:#ccc" title="' + nextyear + '-' + (nextmonth) + '-' + nextday + '">';
					html += nextday;
					nextday++;
				 }
				html += '</tr">';
			  }
			  break;
		    } else {
		      html += '</tr><tr class="calendar-days">';
		    }
		  }
		  html += '</tr></table>';
		 // html += '</div>';
		  //html += '';
		me.picker.set('html',html);
		me.animatePicker('fadeIn');
		$('monthHeading'+this.element.get('id')).addEvent('click',  function() {
			me.animationelement=me.picker.clone().inject(me.picker,"before");
			me.animationelement.setStyles({'opacity': 1, 'margin-left': 0});
			me.picker.setStyles({'opacity': 0, 'margin-left': 0});
			me.buildMonths(year);
			me.animatePicker('fadeIn') 
		})
		$('monthLT'+this.element.get('id')).addEvent('click',  function() { 
			var month=me._date.getMonth();
			var year=me._date.getFullYear();
			month--; if (month<0) {month=11;year--}; 
			me._date=new Date(year,month,1);
			me.animationelement=me.picker.getChildren('table')[0].clone();
			me.buildCalendar();
			me.animatePicker('slideLeft');
		});
		
		$('monthGT'+this.element.get('id')).addEvent('click',  function() { 
			var month=me._date.getMonth();
			var year=me._date.getFullYear();
			month++; if (month>12) {month=1;year++}; 
			me._date=new Date(year,month,1);
			me.animationelement=me.picker.getChildren('table')[0].clone();
			me.buildCalendar();
			me.animatePicker('slideRight');
			//AnimationSprite.dispose();
		});	
		
		$$('tr.calendar-days td.calendar-day').each(function(el){
		    el.addEvent('click',  function() { 
				me.element.set('value',me.setInputDate(el.get('title')));
				me.visible=true;
				me.toggleDisplay();
			})
		});
		
	

	},
	
	buildMonths: function(year) {
		var me = this;
		var html = '';
		//html += '<div class="vlaCalendar">';
		html += '<table class="calendar-table vlaCalendar">';
		html += '<tr><th id="yearLT'+this.element.get('id')+'" class="previous">&laquo;</th><th id="yearHeading'+this.element.get('id')+'" colspan="2">';
		html +=  year;
		html += '</th><th id="yearGT'+this.element.get('id')+'" class="next">&raquo;</th></tr>';
		// fill in the months
		html += '<tr class="calendar-months">';
		  var month = 0;
		  for (var i = 0; i < this.monthLabels.length; i++) {
		      html += '<td class="calendar-month" title="'+year+'-'+month +'">';
		      html +=  this.monthLabels[i];
		      html += '</td>';
			  month++;
			  if (month % 4 == 0) {
			  	html += '</tr><tr class="calendar-months">';
			  }
		   }
		  html += '</tr></table>';
		 //html += '</div>';
		//alert(html);
		me.picker.set('html',html);
		me.animatePicker('fadeIn');
		$('yearHeading'+this.element.get('id')).addEvent('click',  function() { 
			me.animationelement=me.picker.clone().inject(me.picker,"before");
			me.animationelement.setStyles({'opacity': 1, 'margin-left': 0});
			me.picker.setStyles({'opacity': 0, 'margin-left': 0});
			me.buildDecade(year)
			me.animatePicker('fadeIn') 	
		})
		$('yearLT'+this.element.get('id')).addEvent('click',  function() { 
			year--;
			
			me.animationelement=me.picker.getChildren('table')[0].clone();
			me.buildMonths(year) 
			me.animatePicker('slideLeft');
			
		});
		
		$('yearGT'+this.element.get('id')).addEvent('click',  function() { 
			year++;
			me.animationelement=me.picker.getChildren('table')[0].clone();
		 	me.buildMonths(year);
			me.animatePicker('slideRight');
		});
		$$('tr.calendar-months td.calendar-month').each(function(el){
		    el.addEvent('click',  function() { 
				var date=el.get('title').split("-")
				me._date=new Date(date[0],date[1],1);
				me.animationelement=me.picker.clone().inject(me.picker,"before");
				me.animationelement.setStyles({'opacity': 1, 'margin-left': 0});
				me.picker.setStyles({'opacity': 0, 'margin-left': 0});
				me.buildCalendar();
				me.animatePicker('fadeIn') 	
				
			})
		});
				
	},
	
	
	buildDecade: function(year) {
		var me = this;
		var yearStart=year;
		while (yearStart % 10 !=0) {
			yearStart--;
		}
		var html = '';
		//html += '<div class="vlaCalendar">';
		html += '<table class="calendar-table vlaCalendar">';
		html += '<tr><th id="decadeLT'+this.element.get('id')+'" class="previous">&laquo;</th><th id="decadeHeading'+this.element.get('id')+'" colspan="2">';
		html +=  yearStart+'-'+(yearStart+9);
		html += '</th><th id="decadeGT'+this.element.get('id')+'" class="next">&raquo;</th></tr>';
		  var year = 0;
		  html += '<tr class="calendar-decades">';
		  for (var i = yearStart-1; i < (yearStart+11); i++) {
		      html += '<td class="calendar-decade" '+(i==yearStart-1 || i==yearStart+10 ? 'style="color:#ccc"' : '') +' title="'+i+'">';
		      html +=  i
		      html += '</td>';
			  year++;
			  if (year % 4 == 0) {
			  	html += '</tr><tr class="calendar-decades">';
			  }
		   }
		  html += '</tr></table>';
		  //html += '</div>';
		me.picker.set('html',html);	
		me.animatePicker('fadeIn');	
		$('decadeLT'+this.element.get('id')).addEvent('click',  function() { 
			yearStart--;
			me.animationelement=me.picker.getChildren('table')[0].clone();
			me.buildDecade(yearStart);
			me.animatePicker('slideLeft');
			
		});
		
		$('decadeGT'+this.element.get('id')).addEvent('click',  function() { 
			i++;
			me.animationelement=me.picker.getChildren('table')[0].clone();
			me.buildDecade(i);
			me.animatePicker('slideRight');
			
		});
		$$('tr.calendar-decades td.calendar-decade').each(function(el){
		    el.addEvent('click',  function() { 
				me._date=new Date(el.get('title'),1,1);
				me.animationelement=me.picker.clone().inject(me.picker,"before");
				me.animationelement.setStyles({'opacity': 1, 'margin-left': 0});
				me.picker.setStyles({'opacity': 0, 'margin-left': 0});
				me.buildMonths(el.get('title'));
				me.animatePicker('fadeIn') 	
			})
		});
				
	},
	
	
	animatePicker: function(animate) {
		var me = this;
		var animateTransition=Fx.Transitions.Quart.easeOut;
		
		if (me.animationelement) {
			me.animationelement.addClass("AnimationSprite");
		}
		
		switch (animate) {
			case "slideLeft" : 
				//me.picker.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition }).tween('margin-left', [-207, 0]);
				//me.animationelement.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition, onComplete: function () {$$(".AnimationSprite").each(function(el){el.dispose()})} }).tween('margin-left', [0, 207]);
				me.animationelement.inject(me.picker);
				var tmpHeight=(parseInt(me.animationelement.getStyle('height')));
				me.animationelement.setStyle('margin-top','-'+tmpHeight+'px');
				
				me.picker.getChildren('table')[1].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition}).tween('margin-left', [0, 207]);
				me.picker.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition, onComplete: function () {$$(".AnimationSprite").each(function(el){el.dispose()})} }).tween('margin-left', [-207, 0]);
				
				break;
			case "slideRight" : 
				//me.picker.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition }).tween('margin-left', [307, 0]);
				//me.animationelement.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition, onComplete: function () {$$(".AnimationSprite").each(function(el){el.dispose()})} }).tween('margin-left', [0, -207]);
				
				me.animationelement.inject(me.picker);
				var tmpHeight=(parseInt(me.animationelement.getStyle('height')));
				me.animationelement.setStyle('margin-top','-'+tmpHeight+'px');
				me.picker.getChildren('table')[1].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition}).tween('margin-left', [0, -207]);
				me.picker.getChildren('table')[0].setStyle('opacity', 1).set('tween', { duration: me.toggleDuration, transition: animateTransition, onComplete: function () {$$(".AnimationSprite").each(function(el){el.dispose()})} }).tween('margin-left', [207, 0]);
				
				break;
			case "fadeOut" : 	
				me.picker.setStyles({'opacity': 1, 'margin-left': 0});
				me.picker.set('tween', { duration: me.toggleDuration, transition: animateTransition,onComplete: function() { me.picker.setStyles({'opacity': 0, 'visibility': 'hidden','display':'none'})}}).fade('out');
				break;
			case "fadeIn" :  
				me.animationelement.set('tween', { duration: me.toggleDuration, transition: animateTransition}).fade('out');	
				me.picker.set('tween', { duration: me.toggleDuration, transition: animateTransition,onComplete: function() { me.picker.setStyles({'opacity': 1, 'visibility': 'visible','display':'block'});$$(".AnimationSprite").each(function(el){el.dispose()})}}).fade('in');
				//$(".vlaCalendar").setStyles(me.style);
				break;
		}
		//
		
	},
	
	setInputDate: function(_date) {
		date=_date.split("-");
		this.separator
		var day=date[2];
		var month = date[1];
		var year=date[0];

		switch(this.format) {
			case "m/d/y": return month+this.separator+day+this.separator+year; break;
			case "y/m/d": return year+this.separator+month+this.separator+day; break;
			case "y/d/m": return year+this.separator+day+this.separator+month; break;
			case "d/m/y": default: return day+this.separator+month+this.separator+year;
		}
	},
	
	outsideClick: function(_event, _element) {
		var mousePos = this.getMousePos(_event);
		var elementData = _element.getCoordinates();
		return (mousePos.x > elementData.left && mousePos.x < (elementData.left + elementData.width)) &&
			   (mousePos.y > elementData.top  && mousePos.y < (elementData.top + elementData.height)) ? false : true;
	},
	
	getMousePos: function(_event) {
		if(document.all) {
			return { 'x': window.event.clientX + window.getScrollLeft(),
					 'y': window.event.clientY + window.getScrollTop() };
		} else {
			return { 'x': _event.page['x'],
					 'y': _event.page['y'] };
		}
	},
	
	isNumber: function(_number) {
		if(_number == '') return false;
		return (_number >= 0) || (_number < 0) ? true : false;
	},
	
	getPos: function(_element) { 
		var x, y = 0;
		if(_element.offsetParent) {
			do {
				x += _element.offsetLeft;
				y += _element.offsetTop;
			} while(_element = _element.offsetParent);
		} else if(_element.x) {
			x += _element.x;
			y += _element.y;
		}
		return { 'x': x, 'y': y };
	}
							  
							  
});