/**
 * DatePicker
 * @author Rick Hopkins
 * @version 0.2
 * @classDescription A date picker object. Created with the help of MooTools v1.1
 * MIT-style License.
 */

var DatePicker = {
	/** set and create the date picker text box */
	init: function(){
		this.monthNames = ['Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj', 'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac'];
		this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		this.dayNames = ['Ponedjeljak', 'Utorak', 'Srijeda', 'Četvrtak', 'Petak', 'Subota','Nedjelja'];/* Promijenjeno radi rasporeda dana u tjednu (default: Nedjelja prvi dan)  */

		this.dp = $$('input.DatePicker');
		$each(this.dp, function(dp){
			options = Json.evaluate(dp.alt);
			dp.options = {
				monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames,
				daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth,
				dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
				format: options.format || 'dd/mm/yyyy',
				zIndex: options.zIndex || 1000,
				yearStart: options.yearStart || false,
				yearRange: options.yearRange || 10,
				yearOrder: options.yearOrder || 'asc'
			};

			dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
			dp.setStyles({
                'display':'inline',
                'float':'none',
				'width':'175px',
				'background': '#FFF',
				'background-image':'url(upitnikImg/date.gif)',
				'background-repeat':'no-repeat',
				'background-position':'top left',
                'margin':'0px auto',
                'padding-left' : '25px'
			});
			dp.container = false;
			dp.calendar = false;
			dp.interval = null;
			dp.month = false;
			dp.year = false;
			dp.active = false;
			dp.onclick = dp.onfocus = this.create.pass(dp, this);
			dp.onclick = this.create.pass(dp, this);
		}, this);
	},

	show:function(dp){
		dp.container.setStyles({
			opacity:0
		});
		dp.fx.start({
			opacity:[0,1]
		})
	},

	/** create the calendar */
	create: function(dp, fx_flag){

		if (dp.calendar) {
			return false;
			this.show(dp);
		}

		/** create the outer container */
		dp.container = new Element('div', {'styles':{'position':'relative','left':'0px','top':'-27px', 'width':'175px','display':'inline', 'padding':'0px', 'z-index':dp.options.zIndex}, 'class':'dp_container'}).injectBefore(dp);
		dp.fx = new Fx.Styles(dp.container, {duration:50});

		if(isNaN(fx_flag)) fx_flag = 1;
		if(fx_flag==1){
			this.show(dp);
		}

		/** create timers */
		dp.container.onmouseover = dp.onmouseover = function(){
			$clear(dp.interval);
		};
		dp.container.onmouseout = dp.onmouseout = function(){
			dp.interval = setInterval(function(){
				if (!dp.active) this.remove(dp);

			}.bind(this), 500);
		}.bind(this);

		/** create the calendar */
		dp.calendar = new Element('div', {'styles':{'position':'absolute', 'top':'33px', 'left':'0px', 'width':'203px', 'padding':'0px', 'margin':'0px 0px 3px 0px', 'display':'block'}, 'class':'dp_cal'}).injectInside(dp.container);

		/** create the date object */
		var date = new Date();

		/** create the date object */
		if (dp.month && dp.year){
			date.setFullYear(dp.year, dp.month, 1);
		} else {
			dp.month = date.getMonth();
			dp.year = date.getFullYear();
			date.setDate(1);
		}
		dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;

		/** set the day to first of the month */
		var firstDay = 2 - date.getDay();/* Promijenjeno radi rasporeda dana u tjednu (default: 1 - date.getDay();)  */

		/** create the month select box */
		monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
		for (var m = 0; m < dp.options.monthNames.length; m++){
			monthSel.options[m] = new Option(dp.options.monthNames[m], m);
			if (dp.month == m) monthSel.options[m].selected = true;
		}

		/** create the year select box */
		yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
		i = 0;
		dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
		if (dp.options.yearOrder == 'desc'){
			for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		} else {
			for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		}

		/** start creating calendar */
		calTable = new Element('table', {'styles':{'width':'100%'}});
		calTableTbody = new Element('tbody');
		calSelRow = new Element('tr');
		calSelCell = new Element('th', {'styles':{'text-align':'center'}, 'colspan':'7'});
		monthSel.injectInside(calSelCell);
		yearSel.injectInside(calSelCell);
		calSelCell.injectInside(calSelRow);
		calSelRow.injectInside(calTableTbody);

		/** create day names */
		calDayNameRow = new Element('tr');
		for (var i = 0; i < dp.options.dayNames.length; i++){
			calDayNameCell = new Element('th', {'styles':{'text-align':'center', 'width':'14%'}});
			calDayNameCell.appendText(dp.options.dayNames[i].substr(0, 1));
			calDayNameCell.injectInside(calDayNameRow);
		}
		calDayNameRow.injectInside(calTableTbody);

		/** create the day cells */
		while (firstDay <= dp.options.daysInMonth[dp.month]){
			calDayRow = new Element('tr');
			for (i = 0; i < 7; i++){
				if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
					calDayCell = new Element('td', {'styles':{'cursor':'pointer', 'text-align':'center'}, 'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
				} else {
					calDayCell = new Element('td').appendText(' ').injectInside(calDayRow);
				}
				firstDay++;
			}
			calDayRow.injectInside(calTableTbody);
		}

		/** table into the calendar div */
		calTableTbody.injectInside(calTable);
		calTable.injectInside(dp.calendar);

		/** set the onmouseover events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseover = function(){
				el.addClass('dp_roll');
			}.bind(this);
		}.bind(this));

		/** set the onmouseout events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseout = function(){
				el.removeClass('dp_roll');
			}.bind(this);
		}.bind(this));

		/** set the onclick events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onclick = function(){
				ds = el.axis.split('|');
				dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
				this.remove(dp, 1);
			}.bind(this);
		}.bind(this));

		/** set the onchange event for the month & year select boxes */
		monthSel.onfocus = function(){ dp.active = true; };
		monthSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp, 0);
			this.create(dp, 0);
		}.bind(this);

		yearSel.onfocus = function(){ dp.active = true; };
		yearSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp, 0);
			this.create(dp, 0);
		}.bind(this);
	},

	/** Format the returning date value according to the selected formation */
	formatValue: function(dp, year, month, day){
		/** setup the date string variable */
		var dateStr = '';

		/** check the length of day */
		if (day < 10) day = '0' + day;
		if (month < 10) month = '0' + month;

		/** check the format & replace parts // thanks O'Rey */
		dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		dp.month = '' + (month - 1) + '';
		dp.year = year;

		/** return the date string value */
		return dateStr;
	},

	/** Remove the calendar from the page */
	_remove: function(dp){
		dp.active = false;
		if (window.opera) dp.container.empty();
		else if (dp.container) dp.container.remove();
		dp.calendar = false;
		dp.container = false;
	},

	/** Remove the calendar from the page FX */
	remove: function(dp, fx_flag){
		if(fx_flag==1){
			$clear(dp.interval);
			dp.fx.start({
				opacity:[1,0]
			}).chain(function(){ //this._remove(dp);

				});
		}
		else{
			this._remove(dp);
		}

	}

};

/** load the DatePicker Object */
window.addEvent('domready', DatePicker.init.bind(DatePicker));