/**
 * $Source: /home/cvs/cvsroot/cms/integration/web/system/components/date-chooser/date-chooser.js,v $
 * $Author: mpih $
 * $Revision: 1.11 $
 * $Date: 2011/08/10 02:02:48 $
 *
 * Methods for converting a text field into a date chooser.
 */

YAHOO.namespace("convio.DateChooser");

YAHOO.util.Event.onDOMReady(function () {
    for (var i = 0 ; i < document.forms.length ; i ++) {
      // Converts input items with "type:date" to nested date-chooser divs, 
      // then adds a calendar button next to their input field.
      var form = document.forms[i];
      YAHOO.convio.DateChooser.initDateFields(form);
    }
});

YAHOO.convio.DateChooser = {

  _count : 100,

  /**
   * Initializes the date choosers for a given form.
   */
  initDateFields : function(form) {
    if (! form) { return; }

    this._rewriteDateFields(form);
    this._loadAllCalendars(form);
  },

  _rewriteDateFields : function(form) {
    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("type:date") > -1 && validation.indexOf("showChooser:true") > -1) {
        var surroundingElement = element.parentNode;

        // BZ 47883 - Remove surrounding <p> tags. This causes problems
        //            with rendering the YUI calendar.
        while (surroundingElement && surroundingElement.nodeName == 'P') {
          var parent = surroundingElement.parentNode;
          CmsXBrowser.replaceNode(surroundingElement, element);
          surroundingElement = parent;
        }

        var outerDiv = document.createElement('DIV');
        YAHOO.util.Dom.addClass(outerDiv, 'yui-skin-sam');
        var innerDiv = document.createElement('DIV');
        YAHOO.util.Dom.addClass(innerDiv, 'date-chooser');
        outerDiv.appendChild(innerDiv);
        surroundingElement.insertBefore(outerDiv, element);
        surroundingElement.removeChild(element);
        innerDiv.appendChild(element);
      }
    }
  },

  _loadAllCalendars : function(form) {
    var divs = YAHOO.util.Dom.getElementsByClassName("date-chooser", "div", form);
    if (divs.length > 0) {
      this._loadCalendar(divs);
    }
  },
  
  _loadCalendar : function(divs) {

    if ((typeof(YAHOO.convio.env) != 'undefined') 
        && YAHOO.convio.env.admin === true) {
        // Skip yuiloader for admin requrests. Dependencies should have already 
        // been loaded.
        // BZ 56578: In fact, using YUIloader causes problems in IE8 when 
        //           a date chooser is loaded with a RTF.

        for (var i = 0; i < divs.length; i++) {
            YAHOO.convio.DateChooser._addButton(divs[i]);
        }

    } else {
        var loader = new YAHOO.util.YUILoader({
            require: ["calendar"],
            loadOptional: true,
            base: "/system/components/yui/",
            onSuccess: function() {
                for (var i=0; i<divs.length; i++) {
                    YAHOO.convio.DateChooser._addButton(divs[i]);
                }
            }
        });
        loader.insert();
    }
  },
  
  _addButton : function(dateDiv) {
  
    var input = YAHOO.util.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";
  
    YAHOO.util.Dom.setStyle(container, "z-index", ++this._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(YAHOO.convio.DateChooser._dateSelected, input, calendar);
    YAHOO.util.Event.on(img.id, "click", YAHOO.convio.DateChooser._buttonClicked, input, calendar);
  },

  _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();
  },

  _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 = YAHOO.util.Dom.getRegion(input);
    var containerRegion = YAHOO.util.Dom.getRegion(this.containerId);
  
    YAHOO.util.Dom.setX(this.containerId, inputRegion.right + 8);
  
    var top = inputRegion.top;
    var height = containerRegion.bottom - containerRegion.top;
    var viewBottom = YAHOO.util.Dom.getDocumentScrollTop() + YAHOO.util.Dom.getViewportHeight();
    if (top + height > viewBottom) {
      top = viewBottom - height - 4;
    }
  
    YAHOO.util.Dom.setY(this.containerId, top);
  }

};