var Dom = YAHOO.util.Dom;
var DateChooser = new Object();
DateChooser.count = 100;

YAHOO.util.Event.onDOMReady(function () {
    //The first part converts input items with "type:date" to nested
    //divs to make the second part work.
    DateChooser.rewriteDateFields();
    //And the second part looks for date-chooser divs and adds a calendar 
    //button next to their input field.
    DateChooser.loadAllCalendars();
});


DateChooser.rewriteDateFields = function() {
  for (var i = 0 ; i < document.forms.length ; i ++) {
    var form = document.forms[i];
    if (! form) {return; }
    var elements = form.elements;
    for (var j = 0; j < elements.length; j++) {
      var element = elements[j];
	  var validation = element.getAttribute('validation');
      if (element.tagName == "INPUT" && element.type == "text" && validation != null && validation.indexOf("showChooser:true") > -1) {
        var surroundingElement = element.parentNode;
     	surroundingElement.removeChild(element);
        var outerDiv = document.createElement('DIV');
        Dom.addClass(outerDiv, 'yui-skin-sam');
        var innerDiv = document.createElement('DIV');
        Dom.addClass(innerDiv, 'date-chooser');
        outerDiv.appendChild(innerDiv);
        surroundingElement.appendChild(outerDiv);
        innerDiv.appendChild(element);
      }
    }
  }
}



DateChooser.loadAllCalendars = function() {
    var divs = Dom.getElementsByClassName("date-chooser", "div");
    if (divs.length > 0) {
      DateChooser.loadCalendar(divs);
    }
}
  
DateChooser.loadCalendar = function(divs) {

  var loader = new YAHOO.util.YUILoader();
	
  loader.require("calendar");
  loader.loadOptional = true;
	
  loader.base = '/system/components/yui/';
	
  loader.onSuccess = function() {
    for (var i = 0; i < divs.length; i++) {
      DateChooser.addButton(divs[i]);
    }
  }
    	
  loader.insert();
}
  
DateChooser.addButton = function(dateDiv) {
  
  var input = Dom.getFirstChild(dateDiv);
  if (input.tagName != "INPUT" || ! input.name) {
    return;
  }

  input.style.verticalAlign = "middle";

  var name = input.name;
  
  var img = document.createElement("IMG");
  img.id = "date-chooser-button-" + name;
  img.src = "/system/components/date-chooser/calicon.png";
  img.style.padding = "2px";
  img.style.marginLeft = "10px";
  img.style.cursor = "pointer";
  img.style.verticalAlign = "middle";
  dateDiv.appendChild(img);
  
  var container = document.createElement("DIV");
  container.id = "date-chooser-container-" + name;
  container.style.display = "none";
  container.style.position = "absolute";
  
  Dom.setStyle(container, "z-index", ++DateChooser.count);
  
  dateDiv.appendChild(container);

  var calendarId = "date-chooser-" + name;
  
  var calendar = new YAHOO.widget.Calendar(calendarId, container, { 
    title:"Choose a date:", close: true, navigator: true } 
  );
  calendar.render();

  calendar.selectEvent.subscribe(DateChooser.dateSelected, input, calendar);

  YAHOO.util.Event.addListener(img.id, "click", DateChooser.buttonClicked, 
    input, calendar);
}

DateChooser.dateSelected = function(type, args, input) {

  var dates = args[0]; 
  var date = dates[0];
  var year = date[0], month = date[1], day = date[2];
		
  input.value = month + "/" + day + "/" + year;
  this.hide();
}


DateChooser.buttonClicked = function(event, input) {

  var selectedDate = null;

  if (input.value) {
    var validator = new Validator("date", false);
    if (validator.validate(input.value)) {
      this.select(input.value);
    }
	var selectedDates = this.getSelectedDates();
	if (selectedDates.length > 0) {
      var firstDate = selectedDates[0];
      this.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
      this.render();
    } 
  }

  this.show();
  var inputRegion = Dom.getRegion(input);
  var containerRegion = Dom.getRegion(this.containerId);
  
  Dom.setX(this.containerId, inputRegion.right + 8);
  
  var top = inputRegion.top;
  var height = containerRegion.bottom - containerRegion.top;
  var viewBottom = Dom.getDocumentScrollTop() + Dom.getViewportHeight();
  if (top + height > viewBottom) {
    top = viewBottom - height - 4;
  }
  
  Dom.setY(this.containerId, top);
}