X.createSingleton('BHG.GalleryBox2',
	// Constructor
	function BHGGalleryBox2()
	{
		this.data = null;
		this.$container = null;
		this.modal = null;
		
		//this.containerMarkup = '<div class="gallery-box2"><h2></h2><div class="gallery-box-page"></div><a class="btn-close" href="#">Close</a><div class="gallery-box-image-view"></div><ul class="carousel jcarousel-skin-bhg"></ul></div>';
		this.containerMarkup = '';
		this.containerMarkup += '<div class="gallery-box2">';
	    this.containerMarkup += '<div class="gallery-box2-photoTop"><div class="first"></div><div></div></div>';
	    this.containerMarkup += '<div class="gallery-box2-photoBd">';
	    this.containerMarkup += '   <a class="btn-close" href="#">Close</a>';
	    this.containerMarkup += '   <div class="gallery-box2-image-view"></div>';
	    this.containerMarkup += '   <div class="gallery-box2-items holder">';
	    this.containerMarkup += '       <div class="title">title</div>';
	    this.containerMarkup += '       <div class="controls">';
	    this.containerMarkup += '           <a href="#" class="a_left"><img src="/Images/bg_arrow_g2_left.gif" /></a>';
	    this.containerMarkup += '           <span>|</span>';
	    this.containerMarkup += '           <a href="#" class="a_right"><img src="/Images/bg_arrow_g2_right.gif" /></a>';
	    this.containerMarkup += '       </div>';
	    this.containerMarkup += '   </div>';
	    this.containerMarkup += '</div>';
	    this.containerMarkup += '<div class="gallery-box2-photoBot"><div class="first"></div><div></div></div>';
	    this.containerMarkup += '</div>';
	},
	// Prototype Members
	{
		open: function(data, index)
		{
		    index = (index) ? index : 0;
			// If data is the same, do not re-instantiate. Just open existing one.
			// *Added && for index otherwise will always use old index
			if ((this.data == data) && (this.index == index))
			{
				this.modal.show();
				return;
			}
			
			this.data = data;
			this.index = index;
			this.currentIndex = index;
			this.$container = jQuery(this.containerMarkup);
			
			var settings =
			{
				wrapperClasses: ['gallery-box2-modal'],
				fixed: true,
				createHandler: this.onModalCreate.delegate(this)
			};
			this.modal = X.ModalFactory.create(this.$container.get(0), settings);
			
			this.$container.find('.title').html(this.data[this.index].title);
			this.$container.find('.gallery-box2-image-view').html('<div style="background-image: url(\'' + this.data[this.index].imageURL + '\')"></div>');
			//this.$container.find('.gallery-box-page').html('Image ' + (this.index + 1) + ' of ' + this.data.length);
		},
		onModalCreate: function(modal)
		{
			this.$container.find('.btn-close').click(this.onModalCloseBtnClick.delegate(this, modal));
			jQuery('#layers-modal-cover').append('<a href="#" class="total-link"><\/a>').click(this.onModalCloseBtnClick.delegate(this, modal));
			
			if (this.data.length < 2) {
			    //disable controls for 1 item lists
			    this.$container.find('.controls').html('');
			} else {
			    //FIXME: should be able to put these in one method
			    this.$container.find('.a_left').click(this.onUpdateItemClickLeft.delegate(this, modal));
			    this.$container.find('.a_right').click(this.onUpdateItemClickRight.delegate(this, modal));
			}
		},
		onUpdateItemClickLeft: function(e, modal)
		{
			e.preventDefault();
			this.currentIndex = (this.currentIndex == 0) ? this.data.length - 1 : this.currentIndex - 1;
			
			this.$container.find('.title').html(this.data[this.currentIndex].title);
			this.$container.find('.gallery-box2-image-view').html('<div style="background-image: url(\'' + this.data[this.currentIndex].imageURL + '\')"></div>');
			X.Layer.onResize();//FIXME: using private methods is bad, find the proper hook
		},
		onUpdateItemClickRight: function(e, modal)
		{
			e.preventDefault();
			this.currentIndex = (this.currentIndex == (this.data.length - 1)) ? 0 : this.currentIndex + 1;
			
			this.$container.find('.title').html(this.data[this.currentIndex].title);
			this.$container.find('.gallery-box2-image-view').html('<div style="background-image: url(\'' + this.data[this.currentIndex].imageURL + '\')"></div>');
			X.Layer.onResize();//FIXME: using private methods is bad, find the proper hook
		},
		onModalCloseBtnClick: function(e, modal)
		{
			e.preventDefault();
			modal.hide();
		}
	}
);