/**
 * This object holds the variables and functions related to creating gallery dialog.  This is a static object / 
 * namespace under the assumption that there will only be one gallery showing at a time
 * 
 * @static
 */

gm.widget.Gallery = {
	/**
	 * The HTML used to render the gallery
	 */
	_HTML : {
		gallery :
			'<div class="galleryContent">' +
				'<div class="topLeft"></div>' +
				'<div class="topRight"></div>' +
				'<h2>Pics from ${name}</h2>' +
				'<div class="controller">' +
					'<div class="arrL disabled" id="galleryArrLeft" onclick="gm.widget.Gallery.shiftLeft();"></div>' +
					'<div class="cntWrapper">' +
						'<table cellspacing="0" class="cnt" style="left:0px;" id="controllerContent${galleryCounter}"><tr>${items}</tr></table>' +
					'</div>' +
					'<div class="arrR" id="galleryArrRight" onclick="gm.widget.Gallery.shiftRight();"></div>' +
				'</div>' +
				'<div class="mainImage">' +
					'<div class="copy" id="galleryCaption${galleryCounter}">${caption}</div>' +
					'<div class="imageWrapper"><img src="${src}" alt="" id="galleryPic${galleryCounter}" style="height:100px;" /></div>' +
				'</div>' +
				'${loading}' +
			'</div>',
		galleryItem : '<td class="item"><div class="imgWrapper" onclick="gm.widget.Gallery.setPic(${index});"><img src="${src}" alt="${caption}" /><div class="overlay"></div></div></td>',
		galleryCaption: '<div class="caption">${caption}</div><div class="postedby">posted by : ${postedby}</div>',
		galleryLoading: '<div id="loadingGallery">Loading Image ...</div>'
	},

	/**
	 * the dialog object
	 */
	dialog : null,

	/**
	 * counter of the number of times a gallery was opened
	 * @type int
	 */
	_counter : 0,
	
	_initialSelection : null,
	
	/**
	 * Funtion opens the gallery dialog
	 * @param {Object} index
	 */
	open : function(items,selEl) {
		items = items || [];
		this.items = items;
		
		selEl = selEl || items[0];
		this._initialSelection = selEl;
		this._counter ++;
		var it = "",t,c,h,i,_d_,_t_,self=this;
		// set the items html
		for (i=0;i<items.length;i++) {
			t = gm.util.widget.template(this._HTML.galleryItem,{
				src     : items[i].getAttribute('thumb'),
				caption : items[i].getAttribute('postedby'),
				index  : i
			});
			it += t;
		}

		// set the caption html
		c = gm.util.widget.template(this._HTML.galleryCaption,{
			caption        : selEl.getAttribute('caption'),
			postedby       : selEl.getAttribute('postedby')
		});

		// set the overall widget html
		h = gm.util.widget.template(this._HTML.gallery,{
			name           : selEl.getAttribute('eventname'),
			items          : it,
			src            : "images/px.gif",
			caption        : c,
			galleryCounter : this._counter,
			loading        : this._HTML.galleryLoading
		});

		// get the new position of the dialog
		_d_ = gm.util.getDocumentDimensions();
		_t_ = _d_.t + 10;
		_d_ = ((_d_.w - 880) / 2 > 0) ? parseInt((_d_.w - 880) / 2) : 0;

		// render the dialog
		this.dialog = new YAHOO.widget.SimpleDialog("dlg", {
			width: "880px",
			effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
			modal:true,
	    	visible:false,
			draggable:false,
			zIndex:10,
			x: _d_,
			y: _t_
		});

		// render the dialog
		this.dialog.setBody(h);
		this.dialog.render(document.body); 
		this.dialog.show();
		
		// set the selected pic
		this.setPic();

		// add background click listener to the dialog
		YAHOO.util.Event.addListener($('dlg_mask'), "click", function(){
			self.dialog.hide();
			YAHOO.util.Event.removeListener($('dlg_mask'),"click",self.dialog.hide());
		});
	},


	/**
	 * The parent el of the main image
	 */
	_pEl : null,
	
	/**
	 * The current main image element
	 */
	_iEl : null,

	/**
	 * The new image element
	 */	
	_niEl : null,
	
	
	items : null,
	
	/**
	 * 
	 */
	setPic : function(index) {
		var l = $('loadingGallery');
		gm.util.setStyle(l,"opacity",1);
		gm.util.setStyle(l,"display","block");
		
		var d,cel,cap,self=this;
		if (!index && index != 0) {
			d = this._initialSelection;
		} else {
			d = this.items[index];
		}

		if (!d) {
			d = {
				caption: "There was an error processing this image.",
				postedby: ""
			}
		}

		cel = $("galleryCaption" + this._counter);
		cel.innerHTML = gm.util.widget.template(this._HTML.galleryCaption,{
			caption        : d.getAttribute('caption'),
			postedby       : d.getAttribute('postedby')
		});

		// gets the gallery pic image
		this._iEl = $("galleryPic" + this._counter);

		// create a new image object with the proper properties
		this._nel = document.createElement("img");
		
		// attach an event to set the image onload
		YAHOO.util.Event.addListener(this._nel, "load", function() {self.setMainImage();}); 

		this._nel.id = "galleryPic" + this._counter;
		this._nel.src = d.getAttribute('image');
		cap = d.getAttribute('caption');
		this._nel.style.zIndex = -1;
		this._nel.style.position = "absolute";
		this._nel.style.left = "-1000px";
		this._nel.style.top = "-1000px";
		document.body.appendChild(this._nel);

		// set the caption text
		if (cap.length > 100) {
			cap = cap.substring(0,100);
		}
		this._nel.alt = cap;

		// remove the currently showing image
		this._pEl = this._iEl.parentNode;

		if (isIE) {
	//		this.setMainImage(true);
		}
	},
	
	/**
	 * Animates the switch between the image and the incoming one
	 * @param {boolean} skipAnimation
	 */
	setMainImage : function(skipAnimation) {
		if (skipAnimation) {
			
		}

		var a1,fnc1;

		fnc1 = function() {
			var g = gm.widget.Gallery,fnc2,a2;
			if (g._nel.height == 700) {
				nh = g._nel.height;
			} else {
				nh = (700 / g._nel.width) * g._nel.height;
				g._nel.height = nh;
			}

			fnc2 = function() {
				try {
					g._pEl.removeChild(g._iEl);
				} catch(e) {}

				// attach the image
				gm.widget.Gallery._pEl.appendChild(g._nel);
				g._nel.style.zIndex = 1;
				g._nel.style.position = "static";
				g._nel.style.left = "0";
				g._nel.style.top = "0";
				
				// hide the loading
				var a3 = new YAHOO.util.Anim('loadingGallery');
				a3.attributes.opacity = {to:0};
				a3.duration = 0.5;
				a3.onComplete.subscribe(function(){
					$('loadingGallery').style.display = "none";
				});
				a3.animate();
			};
			a2 = new YAHOO.util.Anim(g._pEl)
			a2.attributes.height = {to:nh};
			a2.duration = 0.5;
			a2.onComplete.subscribe(fnc2);
			a2.animate(); 		
		};

		a1 = new YAHOO.util.Anim(this._iEl);
		a1.attributes.opacity = {to:0};
		a1.duration = 0.5;
		a1.onComplete.subscribe(fnc1);
		a1.animate();
	},


	/**
	 * 
	 * @type int
	 */
	_iW : 0,

	/**
	 * cache of the content el
	 * @type HTMLElement
	 */
	_c : null,

	/**
	 * cache of the left style of the content el
	 * @type int
	 */
	_cL : 0,

	/**
	 * Attempts to shift the content to show left side
	 */
	shiftLeft : function() {
		this.getContentEl();
		// if there is an item(s) remaining to the right, shift to show them
		if (this._cL < 0) {
			this._c.style.left = this._cL + (this._iW * 6) + "px";
		}

		this.setArrowClasses();
	},

	/**
	 * Attempts to shift the content to show right side
	 */
	shiftRight : function() {
		this.getContentEl();
		// if there is an item(s) remaining to the right, shift to show them
		if (this._c.offsetWidth + this._cL - (this._iW * 6) > 20) {
			this._c.style.left = this._cL - (this._iW * 6) + "px";
		}
		this.setArrowClasses();
	},

	/**
	 * Gets the current settings of the content element
	 */
	getContentEl : function() {
		var cel = $('controllerContent' +  this._counter);
		this._iW = cel.firstChild.firstChild.firstChild.offsetWidth;
		this._c = cel;
		this._cL = parseInt(cel.style.left);
	},

	/**
	 * Sets the style of the arrow elements
	 */
	setArrowClasses : function() {
		this.getContentEl();
		gm.util.addClass($('galleryArrRight'),"disabled");
		gm.util.addClass($('galleryArrLeft'),"disabled");
		// if there is an item(s) remaining to the right, shift to show them
		if (this._cL < 0) {
			gm.util.removeClass($('galleryArrLeft'),"disabled");
		}
		// if there is an item(s) remaining to the right, shift to show them
		if (this._c.offsetWidth + this._cL - (this._iW * 6) > 20) {
			gm.util.removeClass($('galleryArrRight'),"disabled");
		}
	}
	
};