/** @fileoverview Markup Factory Client library
 *   Provides classes and methods for browser scripting of Markup Factory
 *   components.
 */

/**
 * @namespace Placeholder for the server side MF library.
 */
var MF = {

};

/**
 * @namespace Client Library for Markup Factory
 */
MF.Client = {
    /**
     * Check if the Prototype.js library is loaded.
     * @return Boolean
     */
    isPrototypeLoaded : typeof Prototype === "object",

    /**
     * Sets the target attribute to '_blank' on all links with the 
     * 'rel=external' attribute. This makes them open in a new window
     * while staying standards compliant.
     */
    externalLinks : function () {
      $$('a[rel=external]').each(function(a) { a.target = "_blank"; });
    }
};

/**
 * @class Newsletter acts upon the DOM objects of the code generated by the
 *  GetNewsLetterSignup Function.
 */
MF.Client.Newsletter = Class.create(
/** @scope MF.Client.Newsletter.prototype */
{
    /**
     * Default options
     * @type Object
     */
    defaultOptions : {
        container : "markupfactory-getnewslettersignup",
        input : "markupfactory-getnewslettersignup-email",
        submit : "markupfactory-getnewslettersignup-submit",
        inputText : "email address"
    },

    /**
     * Initialize the object
     */
    initialize : function (options) {
        options = options || {};
        this.container = options.container || this.defaultOptions.container;
        this.input = options.input || this.defaultOptions.input;
        this.submit = options.submit || this.defaultOptions.submit;
        this.inputText = options.inputText || this.defaultOptions.inputText;

        // Check for existence of elements
        if ($(this.container) && $(this.input) && $(this.submit)) { 
            // Set input text
            $(this.input).value = this.inputText;
            // Disable the submit button
            $(this.submit).disabled = true;
            // Observe input field
            $(this.input).observe("keyup", 
                this.validateInput.bindAsEventListener(this));
            $(this.input).observe("click", 
                this.clearInputContents.bindAsEventListener(this));
            $(this.input).observe("blur", 
                this.setInputContents.bindAsEventListener(this));
        }
    },

    /**
     * Keep the submit button disabled unless a valid email address is in the
     * input.
     */
    validateInput : function () {
        var validEmailPattern = 
            /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  
        if ($F(this.input).match(validEmailPattern)) {
            $(this.submit).disabled = false;
        } else {
            $(this.submit).disabled = true;
        }
    },

    /** 
     * Clear out the input contents if they match what was there initially.
     */
    clearInputContents : function () {
        if ($F(this.input) === this.inputText) {
            $(this.input).value = "";
        }
    },

    /** 
     * Reset the input contents if empty
     */
    setInputContents : function () {
        if ($F(this.input).empty()) { 
            $(this.input).value = this.inputText; 
        }
    }
});

var GlenArbor = Class.create(MF.Client,
/** @scope GlenArbor.prototype */
{
  initialize : function () {
    var newsletter = new this.Newsletter({ inputText : "Your Email Address" });
    this.externalLinks();
    this.loginBox();
  },

  /**
   * Set up member login box. This is weak. It should be an MF.Client class.
   */
  loginBox : function () {
    if ($("frmLogin")) {
      var initial = "User Name";
      var input = "username"
      $(input).value = initial;
      $("password").value = initial;

      $("password").observe("focus", function () {
        if ($("password").value == initial) {
          $("password").value = "";
        }
      });
      $(input).observe("focus", function () {
        if ($(input).value == initial) {
          $(input).value = "";
        }
      });
      $(input).observe("blur",  function () {
        if ($F(input).empty()) { 
            $(input).value = initial; 
        }
      });
    }
  }
});

/**
* This function acts as a callback for the JSON feed from flickr defined
* in another script tag. This is for the tiny pics at the bottom of the page.
*/
jsonFlickrFeed = function(o) {
  var quantity = 9;
  var photos = '';
  var div = "flickrphotos";
  Event.observe(window, 'load', function() {
    // Photos at bottom
    if ($(div)) {
      if (o.items.length < quantity) { quantity = o.items.length; }
      for (var i=0; i < quantity; i += 1) {
        var imgURL = o.items[i].media.m.gsub("_m.", "_s.");
        var content = { title : o.items[i].title, 
                    link : o.items[i].link, 
                    img : imgURL };
        photos += ('<a rel="external" href="#{link}">' +
          '<img src="#{img}" alt="#{title}" title="#{title}" /></a>')
          .interpolate(content);
          
      }
      $(div).update(photos); 
      MF.Client.externalLinks();
    }
  });
};

document.observe("dom:loaded", function () { new GlenArbor() });