/**
 ** Included in this file:
 **
 **   + Leapfrog Recommendation Builder
 **
 ** This function provides the presentation mechanism for Leapfrog recommendations.
 **
 ** Complete documentation of all renderer related facilities is available in the RDK or online at
 ** http://recmanager.atg.com/api/renderer/
 **/


/** Leapfrog Recommendation Builder
 **
 ** @param slot_name is the ID value for the element on the page that we render recommendations into.
 ** @param rec_data is an array of objects representing the recommendation data to display.
 **
 ** Three functions from the ATGSvcs namespace are used:
 **
 **   + price() returns a formatted price string or null.
 **   + util.trunc() returns a truncated string that doesn't split mid word.
 **   + rec_id() returns an page id for a recommendation.
 **
 ** IMPORTANT: A container element having the class "cs-rec" MUST wrap each recommendation. This
 ** container element also MUST have an id generated by the rec_id function. This function takes
 ** two parameters:
 **
 **   + slot_name (the same value that is passed in to the rec_builder)
 **   + recommendation.id (the server side id value that is part of the passed in rec_data array)
 **
 ** To use this rec builder, put the following page tagging on your web page:
 **
 **   <div id="cs-recslot" class="cs-slot">
 **     <dl class="cs-cfg" style="display: none">
 **       <dt>headerText</dt><dd></dd>
 **       <dt>numRecs</dt><dd>3</dd>
 **       <dt>-rec-builder</dt><dd>Leapfrog_Rec_Builder</dd>
 **       <dt>-inc-price</dt><dd>true</dd>
 **       <dt>dataItems</dt><dd>
 **         <dl>
 **           <dt>ageGroupText</dt>
 **         </dl>
 **       </dd>
 **     </dl>
 **   </div>
 **
 ** An optional page tagging parameter can be added to customize the the text of the "Details"
 ** link.  For example, to change the text of "Details" to "See More Information" add the 
 ** following page tagging:
 **
 **   <dt>-details-text</dt><dd>See More Information</dd>
 **
 ** Sample HTML Output This Rec Builder Produces:
 **
 **   <div id="cs-rec-cs_recslotlfprod19138" class="cs-rec">
 **     <span class="cs-top-wrapper">
 **       <a href="http://leapfrog.com/ondemand/browse/productDetail.jsp?productId=lfprod19138" class="cs-title cs-name">AlphaPet Explorer</a>
 **       <span class="cs-ageGroupText">Age 8+</span>
 **     </span>
 **     <a href="http://leapfrog.com/ondemand/browse/productDetail.jsp?productId=lfprod19138">
 **       <img class="cs-image" src="http://static.atgsvcs.com/images/spacer.gif"/>
 **     </a>
 **     <span class="cs-bottom-wrapper">
 **       <span class="cs-listPrice">$24.99</span>
 **       <span class="cs-salePrice">$19.99</span>
 **       <a href="http://leapfrog.com/ondemand/browse/productDetail.jsp?productId=lfprod19138" class="cs-details">Details ></a>
 **     </span>
 **   </div> 
 **/
ATGSvcs.rec_builder("Leapfrog_Rec_Builder", function (slot_name, rec_data) {
  // short handle for the DOM Builder
  var dom = ATGSvcs.dom, 

  // short handle for the configuration function
  cfg = ATGSvcs.cfg,

  // returns a formatted price or null depending on the page configuration
  price_string = ATGSvcs.price(slot_name, rec_data.price),

  // create a <span> tag or leave price null
  price = price_string ? dom.SPAN({Class: "cs-price"}, price_string) : null,

  // if the retailer specified the text for details, use it
  details_string = cfg("-details-text", slot_name, "Details >"),

  // create a tag for details
  details = dom.A({href: rec_data.url, Class: "cs-details"}, details_string),

  // check to see if there is a limit set on the product name
  name_length = cfg('-name-length', slot_name, 0),

  // if so, truncate the name using the trunc() function
  name_string = name_length ? ATGSvcs.util.trunc(rec_data.name, name_length) : rec_data.name,

  // if retailer specified text to append, do so
  append_string = cfg("-append-title", slot_name, null),

  append_title = append_string ? dom.SPAN({Class: "cs-append-title"}, append_string) : null,

  // get data items
  data_items = cfg("dataItems", slot_name, null), i, attribute_value,

  // create a <span> tag for the top of the slot
  top_wrapper = dom.SPAN({Class: "cs-top-wrapper"}, 
                  dom.A({href: rec_data.url, Class: "cs-title cs-name"}, name_string, append_title)),

  list_price = null;

  // iterate over any other requested data items and add them as span elements
  if (data_items) {
    for (i = 0; i < data_items.length; i++) {
      attribute_value = rec_data[data_items[i]];

      // The attribute can be an Array, in which case we join the values as a comma separated list
      attribute_value = Object.prototype.toString.call(attribute_value) === "[object Array]" ? attribute_value.join(", ") : attribute_value;

      if (data_items[i] == "ageGroupText") {
        // add the span element with a class of cs-ATTRIBUTENAME
        top_wrapper.appendChild(dom.SPAN({Class: "cs-" + data_items[i]}, attribute_value));
      } else if (data_items[i] == "listPrice") {
        // add the span element with a class of cs-ATTRIBUTENAME
        if (attribute_value != null) {
          list_price = dom.SPAN({Class: "cs-" + data_items[i]}, ATGSvcs.price(slot_name, attribute_value));
          price = price_string ? dom.SPAN({Class: "cs-salePrice"}, price_string) : null;
        }
      }
    }
  }
  
  // return the recommendation DOM element
  return dom.DIV({Class: "cs-rec", id: ATGSvcs.rec_id(slot_name, rec_data.productId)}, top_wrapper,
                  dom.A({href: rec_data.url}, dom.IMG({Class: "cs-image", src: rec_data.image})),
                    dom.SPAN({Class: "cs-bottom-wrapper"}, price, list_price, details));
});


/** Tiles Renderer: uses a rec_builder to render the recommendation data into a DOM representation.
 **
 ** @param slot_element a dom node whose element which is the slot where recommendations are to be 
 ** rendered.
 **
 ** When the function is called the this keyword is set to the recommendation data object returned
 ** by the server. Its properties contain the data used for rendering the recommendation slot.
 **
 ** The call to ATGSvcs.build_rec() will use the recommendation builder function (above) to render
 ** the DOM elements for each recommendation. It takes two parameters:
 **
 **   + slot name -- here we derive this value from the slot_element
 **   + rec data (this.recs[i]) -- an object whose properties are the data values for the recommendation.
 **/
ATGSvcs.renderer("Leapfrog_Renderer", function (slot_element){
  // the slot name is the id attribute of the slot element
  var slot_name = slot_element.id, rec, parity, position;

  // if headerText is set, create an element for it
  if (this.headerText) {
    // Add a <div> if the headerText is set
    slot_element.appendChild(ATGSvcs.dom.DIV({Class: "cs-header-text"}, this.headerText));
  }

  // loop through each of the recommendations and add the recommendation element for each one
  for (var i=0; i < this.recs.length; i++) {
    parity = ((i+1) % 2 == 0) ? "even-rec" : "odd-rec"
    if (i == 0) {
      position = " first-rec";
    } else if (i == this.recs.length - 1) {
      position = " last-rec";
    } else {
      position = "";
    }
    rec = ATGSvcs.build_rec(slot_name, this.recs[i]);
    rec.className = rec.className + " "  + parity + position 
    slot_element.appendChild(rec);
  }

  // ATGSvcs.dom.ezc() or "E-Z clearing div" is equivalent to <div style="clear:both"></div>
  slot_element.appendChild(ATGSvcs.dom.ezc());
});