/**
 * This object holds the variables and functions related to creating a blogroll of pictures.  This is a static object /
 * namespace under the assumption that there will only be one roll per page.
 * 
 * @static
 */

gm.widget.pictureBlog = {
	
	/**
	 * The URLS used in the site
	 */
	_URL : {
		localEventpics : 'eventpicfeed3.xml',
		eventpics      : "http://" + location.hostname + '/api/messages.php',
		eventPage      : "event_pics.html",
		areaCodePage   : "event_area_code.html"
	},

	/**
	 * Holds the html strings used in the picture blog
	 */
	_HTML : {
		galleryLink : "View As Slideshow",
		loading : '<div class="loadingDiv">Loading ...</div>',
		item :
			'<div class="imgWrapper"><img src="${imgsrc}" alt="${imgtxt}" /><div class="overlay"></div></div>' +
			'<div class="text">' + 
				'<div class="copy">${imgtxt}</div>' +
				'<div class="post">Posted ${post} ${imgtime}<br />${event} ${areacode}</div>' + 
			'</div>' +
			'<div class="clr"></div>',
		postedBy : 'By ${postedby} ',
		event    : 'Event: <a href="${eventurl}">${eventname}</a><br />',
		areaCode : 'Area Code: <a href="${areacodeurl}">${areacode}</a>'
	},

	/**
	 * Reference to the artist
	 * @type int
	 */
	_artistid : gm.artistid || 3,
	
	/**
	 * Holds the xml data
	 * @type XMLDocument
	 */
	_x : null,
	
	/**
	 * Holds the item data for the current page
	 * @type Array
	 */
	_d : [],
	
	/**
	 * Holds the xml data for a single event (showing in the gallery)
	 */
	_xe :null,
	
	/**
	 * Holds the item data for a single event (showing in the gallery)
	 */	
	_de :[],

	/**
	 * State trackers
	 * @type boolean
	 */
	isInit : false,

	/**
	 * @type boolean
	 */
	paging : false,

	/**
	 * @type int
	 */
	numItems : 0,
	
	/**
	 * Tracks the number of times the dialog has been opened
	 * @type int
	 */
	_dialogCounter : 0,
	
	/**
	 * Tracks the event that we are currently showing
	 * @type String
	 */	
	eventid : null,
	
	areacode : null,
	
	/**
	 * function initializes the object / html
	 */
	init : function() {
		this.eventid = gm.util.getURLParameter("eventid");
		this.areacode = gm.util.getURLParameter("areacode");
		if (gm.isDebug) {
			this._URL.eventpics = this._URL.localEventpics;
		}
		this.render();
		this.isInit = true;
	},
	
	/**
	 * Gets the data to show in the blogroll for a single page.
	 * @param {int} offset   the number to start loading the paged data from
	 */
	getPage : function(offset) {
		this.currentOffset = offset;
		pel = $('livePicContent');
		pel.innerHTML = this._HTML.loading;

		var u = this._URL.eventpics + "?offset=" + offset + "&limit=" + this.elementsPerPage + "&program_ids=" + this._artistid;
		u += (this.eventid) ? "&eventid=" + this.eventid : "";
		u += (this.areacode) ? "&areacode=" + this.areacode : "";
		this._x = gm.util.AJAX.syncRequest(u);
		this.totalRecords = this._x.firstChild.getAttribute("totalRecords");
		this.setPagingLinks(offset);
	},

	/**
	 * Gets the item data for a single event
	 * @param {String} eventid
	 */
	getEventItems : function(eventid) {
		// generate the url
		var u = this._URL.eventpics + "?program_ids=" + this._artistid;
		u += (eventid) ? "&eventid=" + eventid : "";
		u += (!eventid && this.areacode) ? "&areacode=" + this.areacode : "";

		// get the data
		var x = gm.util.AJAX.syncRequest(u);
		var a = x.getElementsByTagName("item");
		var d = [];
		
		for (var i = 0;i<a.length;i++) {
			if (a[i].getAttribute("eventid") == eventid) {
				d.push(a[i]);
			}
		}
		this._xe = x;
		this._de = d;
		return d;
	},

	/**
	 * Renders the picture blog roll
	 */
	render : function() {
		if (!this._x) {
			this.getPage(0);
		}
		var prevEvent = "",i,els,pel,t,a,self=this,isFirst=true,eventNameCnt=-1,picIndex = 0,h;
		els = this._x.getElementsByTagName("item");
		this.numItems = els.length;
		pel = $('livePicContent');
		pel.innerHTML = "";
		

		if (this.eventid) {
			t = document.createElement("div");
			t.className = "livePicEvent first";
			prevEvent = els[0].getAttribute('eventname');
			t.innerHTML = prevEvent + "&nbsp;&nbsp;";
			a = document.createElement("a");
			this.attachEventAction(a,els[0].getAttribute('eventid'));
			a.innerHTML = this._HTML.galleryLink;
			pel.appendChild(t);
			t.appendChild(a);
			isFirst = true;
		}

		this._d = [];
		
		// no items
		if (this.numItems == 0) {
			pel.innerHTML = '<div class="noEventsFound">We\'re Sorry.<br /><br />There were no pictures or messages found for this event.  Please try another one.</div>'
			return;
		}
		
		// loop through the items and render them
		for (i = 0;i<this.numItems;i++) {
			// attach the link so that hash's will scroll to this item
			t = document.createElement("a");
			t.name = els[i].getAttribute('itemid');
			pel.appendChild(t);
			
			// create the item
			t = document.createElement("div");
			t.className = (isFirst) ? "livePicItem first" : "livePicItem";
			isFirst = false;
			h= gm.util.widget.template(this._HTML.item,{
				post     : (els[i].getAttribute('postedby')) ? this._HTML.postedBy : "",
				event    : (els[i].getAttribute('eventid')) ? this._HTML.event   : "",
				areacode : (els[i].getAttribute('areacode')) ? this._HTML.areaCode : ""
			});
	
			t.innerHTML = gm.util.widget.template(h,{
				imgtime     : els[i].getAttribute('timepassedstring'),
				postedby    : els[i].getAttribute('postedby'),
				imgtxt      : els[i].getAttribute('caption'),
				imgsrc      : els[i].getAttribute('image').replace("_F.jpg","_B.jpg"),
				eventname   : els[i].getAttribute('eventname'),
				eventurl    : this._URL.eventPage + "?program_ids=" + this._artistid + "&eventid=" + els[i].getAttribute('eventid'),
				areacode    : els[i].getAttribute('areacode'),
				areacodeurl : this._URL.areaCodePage + "?program_ids=" + this._artistid + "&areacode=" + els[i].getAttribute('areacode')
			});
			this.attachItemAction(t.firstChild,els[i].getAttribute('eventid'),picIndex);
			this._d.push(els[i]);
			pel.appendChild(t);
			picIndex ++;
		}
	},
	
	/**
	 * Attaches actions to the event header
	 * @param {HTMLElement} el     the element that we are attaching events to
	 * @param {int}         index  the index of the event
	 */
	attachEventAction : function(el,eventid) {
		var self = this;
		YAHOO.util.Event.addListener(el, "click", function() {self.openGallery(eventid);}); 
	},
	
	/**
	 * Attaches actions to each item
	 * @param {HTMLElement} el         the item that we are attaching events to
	 * @param {int}         index      the index of the event
	 * @param {int}         itemIndex  the index of the item in the event
	 */
	attachItemAction : function(el,eventid,itemIndex) {
		var self = this;
		YAHOO.util.Event.addListener(el, "click", function() {self.openGallery(eventid,itemIndex);}); 
	},


	/**
	 * Calls the method to open a gallery
	 * @param {Object} index
	 */
	openGallery : function(eventid,picindex) {
		// get the handle to the els for this event
		var els = this.getEventItems(eventid);
		var selEl = (!picindex && picindex != 0) ? els[0] : this._d[picindex] ;
		gm.widget.Gallery.open(els,selEl);
	},

	/**
	 * the number of elements we want to show per page
	 */
	elementsPerPage : 10,
	
	/**
	 * The current offset
	 * @type int
	 */
	currentOffset : 0,
	
	/**
	 * tracks the toal records
	 * @type int
	 */
	totalRecords : 0,

	/**
	 * gets the previous page
	 * @param {Object} el
	 */
	prev : function(el) {
		el.blur();
		if (gm.util.hasClass(el,"disabled")) {
			return;
		}
		
		this.getPage(this.currentOffset - this.elementsPerPage);
		this.render();
	},

	/**
	 * gets the next page
	 */
	next : function(el) {
		el.blur();
		if (gm.util.hasClass(el,"disabled")) {
			return;
		}

		this.getPage(this.currentOffset + this.elementsPerPage);
		this.render();
	},

	/**
	 * gets the first page
	 */
	first : function() {
		this.getPage(0);
		this.render();
	},

	/**
	 * gets the last page
	 */
	last : function() {
		this.getPage(this.totalRecords - (this.totalRecords % this.elementsPerPage) - 1);
		this.render();
	},

	/**
	 * sets the display of the paging links
	 * @param {Object} offset
	 */
	setPagingLinks : function(offset) {
		// if there are no paging links to show return;
		if (this.totalRecords < this.elementsPerPage) {
			gm.util.addClass($('prevPage1'),"invisible");
			gm.util.addClass($('prevPage2'),"invisible");
			gm.util.addClass($('nextPage1'),"invisible");
			gm.util.addClass($('nextPage2'),"invisible");
			return;
		}

		// set the paging numbers
		gm.util.removeClass($('prevPage1'),"disabled");
		gm.util.removeClass($('prevPage2'),"disabled");
		gm.util.removeClass($('nextPage1'),"disabled");
		gm.util.removeClass($('nextPage2'),"disabled");

		// disable the prev button
		if (offset == 0) {
			gm.util.addClass($('prevPage1'),"disabled");
			gm.util.addClass($('prevPage2'),"disabled");
		}

		// disable the next button
		if ( (offset + this.elementsPerPage) >= this.totalRecords) {
			gm.util.addClass($('nextPage1'),"disabled");
			gm.util.addClass($('nextPage2'),"disabled");
		}
	},

	/**
	 * unloads the data
	 */
	unload : function(){
		clearTimeout(this._t);
		this._x = null;
		this._d = null;
		this._xe = null;
		this._de = null;
		this._HTML.item = null;
		this._HTML = null;
		this.isInit = null;
		this.paging = null;
	}
};