var HgLightBox = new Abstract();

HgLightBox.extend({
	
	/************************************
		Constructor
	************************************/
	Initialize: function(modalPopup)
	{
		this.$_modalPopup	= modalPopup;
		this.$_container	= null;
		this.$_currentImage	= null;
		
		if (!this.$_items)
			this.$_items = null;
	},
	
	/************************************
		Properties
	************************************/
	SetItemCollection: function(items)
	{
		this.$_items = items;
	},
	
	
	/************************************
		Private Methods
	************************************/
	_EnsureChildren: function()
	{
		if (!this.$_mainContainer)
		{
			this.$_mainContainer	= $('LightBoxModal');
			this.$_imageContainer	= this.$_mainContainer.getElement('.Image');
			this.$_detailsContainer	= this.$_mainContainer.getElement('.Details');
			this.$_bPrev			= this.$_mainContainer.getElement('.Prev');
			this.$_bNext			= this.$_mainContainer.getElement('.Next');
			this.$_bClose			= this.$_mainContainer.getElement('.Close');
			this.$_lArtist			= this.$_detailsContainer.getElement('.Artist');
			this.$_lTitle			= this.$_detailsContainer.getElement('.Title');
			this.$_lDescription		= this.$_detailsContainer.getElement('.Description');
			
			this.$_effects = {
				'Height'	: new Fx.Styles(this.$_mainContainer, {
					'transition'	: Fx.Transitions.Quad.easeIn,
					'duration'		: 500
				}),
				
				'Width'		: new Fx.Styles(this.$_mainContainer, {
					'transition'	: Fx.Transitions.Quad.easeIn,
					'duration'		: 500
				}),
				
				'QuickHeight'	: new Fx.Styles(this.$_mainContainer, {
					'transition'	: Fx.Transitions.Quad.easeOut,
					'duration'		: 225
				}),
				
				'HideImage'	: new Fx.Styles(this.$_imageContainer, {
					'transition'	: Fx.Transitions.Quad.easeIn,
					'duration'		: 300
				}),
				
				'ShowImage'	: new Fx.Styles(this.$_imageContainer, {
					'transition'	: Fx.Transitions.Quad.easeIn,
					'duration'		: 300
				}),
				
				'HideDetails' : new Fx.Styles(this.$_detailsContainer, {
					'transition'	: Fx.Transitions.Quad.easeOut,
					'duration'		: 200
				}),
				
				'ShowDetails' : new Fx.Styles(this.$_detailsContainer, {
					'transition'	: Fx.Transitions.Quad.easeIn,
					'duration'		: 200
				})
			};
			
			this.$_bPrev.addEvent('click', this._OnPrevious.bindWithEvent(this));
			this.$_bNext.addEvent('click', this._OnNext.bindWithEvent(this));
			this.$_bClose.addEvent('click', this._OnClose.bindWithEvent(this));
		}
		
		return this;
	},
	
	_GetOffsetHeight: function()
	{
		return (22 * 2) + 2 + 8;
	},
	
	_GetOffsetWidth: function()
	{
		return (71 * 2) + 2 + 8;
	},

	_DisplayImage: function(image)
	{
		this.$_currentImage = $(image);
		
		this._SetInProgress.delay(this._Maximize(0), this, [false]);
		
		return this;
	},
	
	_Minimize: function(duration)
	{
		// Hide Details
		this.$_effects['HideDetails'].StartDelayed(duration, {'opacity':0});
		this.$_effects['QuickHeight'].StartDelayed(duration, {'height':this.$_currentImage.height + this._GetOffsetHeight()});
		
		duration += this.$_effects['QuickHeight'].GetDuration() - 75;
		
		
		// Hide Image
		this.$_effects['HideImage'].StartDelayed(duration, {'opacity':0});
		
		duration += this.$_effects['HideImage'].GetDuration();
		
		
		// Remove Image
		this.$_currentImage.remove.delay(duration, this.$_currentImage);
		
		duration += 10;
			
		
		return duration;
	},
	
	_Maximize: function(duration)
	{		
		// Change Height	
		this.$_effects['Height'].StartDelayed(duration, {'height':this.$_currentImage.height + this._GetOffsetHeight()});
		
		duration += this.$_effects['Height'].GetDuration();
		
		
		// Change Width
		this.$_effects['Width'].StartDelayed(duration, {'width':this.$_currentImage.width + this._GetOffsetWidth()});
		
		duration += this.$_effects['Width'].GetDuration();
		
		// Inject Image
		this.$_currentImage.injectInside.delay(duration, this.$_currentImage, [this.$_imageContainer]);
		
		
		// Show Image
		this.$_effects['ShowImage'].StartDelayed(duration, {'opacity':1});
		
		duration += this.$_effects['ShowImage'].GetDuration();
		
		// Show Details
		this.$_effects['ShowDetails'].StartDelayed(duration, {'opacity':1});
		this.$_effects['QuickHeight'].StartDelayed(duration, {'height':this.$_currentImage.height + this._GetOffsetHeight() + 70});
		
		duration += this.$_effects['QuickHeight'].GetDuration() - 75;
		
		return duration;
	},
	
	_LoadItem: function(item)
	{
		var image = new Image();
		
		this.$_currentItem = item;
		
		image.onload = this._OnImageLoad.bind(this, [image]);
		image.src = item.GetFullImageUrl();
		
		this.$_lArtist.setText(item.GetArtist());
		this.$_lTitle.setText(item.GetTitle());
		this.$_lDescription.setHTML(
			item.GetYear()
			+ '  '
			+ item.GetMaterial()
			+ '  '
			+ item.GetDimensions()
			+ '  '
			+ '<span class="Sold">'
			+ item.GetIsSold()
			+ '</span>'
		);
		
		return this;
	},
	
	_IsInProgress: function()
	{
		return this.$_isInProgress;
	},
	
	_SetInProgress: function(b)
	{
		this.$_isInProgress = b ? true : false;
	},
	
	
	/************************************
		Public Methods
	************************************/
	LoadStockItem: function(item)
	{
		if (this._IsInProgress())
			return this;
		
		this._SetInProgress(true);
		
		var duration = 0;
				
		if (this.$_currentItem)
		{
			duration += this._Minimize(0);
			
			if (!this.$_modalPopup.IsOpen())
				this.$_modalPopup.Show();
				
			this._LoadItem.delay(duration, this, [item]);
		}
		else
		{
			if (!this.$_modalPopup.IsOpen())
				this.$_modalPopup.Show();
				
			this._EnsureChildren();
			this._LoadItem(item);
		}
		
		return this;
	},
	
	Close: function()
	{	
		this.$_modalPopup.Hide();
		return this;
	},
	
	Next: function()
	{
		var index = this.$_currentItem.GetIndex() + 1;
		
		if (index < this.$_items.length)
			this.LoadStockItem(this.$_items[index]);
			
		return this;
	},
	
	Previous: function()
	{
		var index = this.$_currentItem.GetIndex() - 1;
		
		if (index >= 0)
			this.LoadStockItem(this.$_items[index]);
			
		return this;
	},
	
	
	/************************************
		Event Handling
	************************************/
	_OnImageLoad: function(image)
	{
		this._DisplayImage(image);
	},
	
	_OnPrevious: function(e)
	{
		e.stop();
		return this.Previous();
	},
	
	_OnNext: function(e)
	{
		e.stop();
		return this.Next();
	},
	
	_OnClose: function(e)
	{
		e.stop();
		return this.Close();
	}
});