Event.observe(document, 'dom:loaded', function(){
  new Interface();
});

Interface = Class.create({
  initialize: function() {
    // tell css what we can do
    Utility.addHTMLClassName('with-javascript');

    // draw the page
    this.drawPage();
  },

  /* Sets up the page by creating any objects that should be created, and other
   * misc display tasks.
   */
  drawPage: function() {
    this.navigation = new Navigation('navigation');

    if ($('product_image_gallery')) this.gallery = new Gallery('product_image_gallery');
  },

  /* Makes input fields with the class name "helper" have a default value that
   * will clear itself for user input, and fills the helper text back when the
   * input loses focus while empty.
   */
  makeHelperInputs: function(element) {
    element = $(element);

    var helpers = [];
    if (element) helpers = element.select('input.helper');
    else helpers = $$('input.helper');

    helpers.each(function(input) {
      if (!input.title || input._helper) return;
      input._helper = true;

      var form = input.up('form');
      if (form) form.observe('submit', function() { if (input.value == input.title) input.value = ''; });

      if (!input.value) input.value = input.title;
      else input.removeClassName('helper');

      input.observe('focus', function() {
        if (input.value == input.title) {
          input.value = '';
          input.removeClassName('helper');
        }
      });

      input.observe('blur', function() {
        if (!input.value) {
          input.value = input.title;
          input.addClassName('helper');
        }
      });
    });
  }

});