/**
 * 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.featuredHomePicPromo = function(promoId,el,recordLimit,largePicWrapper) {
	
	/**
	 * Holds the URL's used to get the list of events
	 */
	this._URL = {
		local : 'eventpicfeed3.xml',
		feed  : "http://" + location.hostname + '/api2/messages.php',
		eventsPicPage : 'event_pics.html'
	};
	
	this._artistid = gm.artistid || 9;
	
	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");
	
	/**
	 * If a large pic element is passed in set it here
	 * @type HTMLElement
	 */	
	this.lpW = (largePicWrapper) ? $(largePicWrapper) : null;
	
	/**
	 * Create the image preview
	 * @type HTMLElement
	 */
	this.imagePreview = document.createElement("img");
	this.imagePreview.style.width="300px";
	

	
		

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
		START THE RENDERING PROCESS
	   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

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



	// we only get data once so ...
	this.wEl.innerHTML = this._HTML.loading;
//	var u = this._URL.feed + "?promo=" + this.promoId + "&program_ids=" + this._artistid;
	var u = this._URL.feed + "?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,img;
	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 large image for the featured pic large image if it exists.
		if (i==0 && this.lpW) {
			// append the image preview element
			this.lpW.appendChild(this.imagePreview);
			this.imagePreview.src = this._d[i].getAttribute("image");
		}
		
		// 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'),this._d[i].getAttribute("image"));
		tr.appendChild(td);
		td.appendChild(d);
		d.appendChild(im);
		td.appendChild(p);

		if (tr.childNodes.length == 6) {
			tr = document.createElement("tr");
			tb.appendChild(tr);
		}		
	}
	
	this.wEl.appendChild(t);
};