/**
 * Renders the event list for the specified user on the gridmob site
 * @constructor
 * @param {String}             promoId      the id that we will use to find the promo
 * @param {String|HTMLElement} el           the element that we will append the promo to
 * @param {int}                recordLimit  the number of items max we will show in the promo
 */

gm.widget.featuredPicPromo = function(promoId,el,recordLimit) {
	
	/**
	 * Holds the URL's used to get the list of events
	 */
	this._URL = {
		local : 'eventpicfeed3.xml',
		feed  : "http://" + location.hostname + '/api/messages.php',
		eventsPicPage : 'event_pics.html'
	};
	
	this._artistid = gm.artistid || 3;
	
	this.promoId = promoId || "1";

	if (gm.isDebug) {
		this._URL.feed = this._URL.local;
	}

	/**
	 * Holds the html strings used in the picture blog
	 */
	this._HTML = {
		loading : '<div class="loadingDiv">Loading ...</div>'
	};
	
	/**
	 * Holds the xml data
	 * @type XMLDocument
	 */
	this._x = null;
	
	/**
	 * holds the data
	 * @type Array
	 */
	this._d = [];
	
	/**
	 * Tracks the total number of events
	 * @type int
	 */
	this.totalRecords = 0;

	/**
	 * Determines the number of records to show
	 * @type int
	 */
	this.recordLimit = recordLimit || 5;

	/**
	 * Tracks the wrapper el we will append the returned data to
	 * @type HTMLElement
	 */	
	this.wEl = (el) ? $(el) : $("promoWrapper");
		

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		START THE RENDERING PROCESS
	   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

	/**
	 * Function to handle the attaching of events to the item
	 */
	this.attachItemEvent = function(el,eventid,itemid) {
		var self = this;
		YAHOO.util.Event.addListener(el, "click", function() {location.href=self._URL.eventsPicPage + "?eventid=" + eventid + "&program_ids=" + self._artistid + "#" + itemid;}); 
	}

	// we only get data once so ...
	this.wEl.innerHTML = this._HTML.loading;
	var u = this._URL.feed + "?promo=" + this.promoId + "&program_ids=" + this._artistid;

	this._x = gm.util.AJAX.syncRequest(u);
	this._d = this._x.getElementsByTagName("item");
	this.totalRecords = this._x.firstChild.getAttribute("totalRecords");

	// init the vars to handle the rendering data
	var i=0,el,u,t,tb,tr,td,d,p,im,m,s=this.showMoreLink - 1;
	el = this.wEl;
	el.innerHTML = "";

	// create the table that will hold the items
	t = document.createElement("table");
	t.className = "cnt";
	tb = document.createElement("tbody");
	t.appendChild(tb);
	tr = document.createElement("tr");
	tb.appendChild(tr);

	// cycle through the records and render the items
	for (i = 0;i<this._d.length && i<this.recordLimit;i++) {
		// create the row
		td = document.createElement("td");
		td.className = "item";
		d = document.createElement("div");
		im = document.createElement("img");
		im.src = this._d[i].getAttribute('thumb');
		p = document.createElement("p");
		p.innerHTML =  this._d[i].getAttribute('timepassedstring');
		
		// attach events and append to the div
		this.attachItemEvent(td,this._d[i].getAttribute('eventid'),this._d[i].getAttribute('itemid'));
		tr.appendChild(td);
		td.appendChild(d);
		d.appendChild(im);
		td.appendChild(p);
	}
	
	this.wEl.appendChild(t);
};