var Buyersguide = Class.create(
{
	open: false,
	contents: new Array(),
	currentContent: undefined,
	container: undefined,
	roundButtons: new Array(),
	closeBtn: undefined,
	
	initialize: function(mainContainerId, roundBtnClassname, contentClassname, openCloseBtn, closeBtn)
	{
		if($(mainContainerId))
		{
			this.closeBtn = closeBtn;
			this.container = $(mainContainerId);
			this.contents = $$('.'+contentClassname);
			this.setObservers($$('#'+mainContainerId+' a.'+roundBtnClassname), openCloseBtn, closeBtn);
		}
	},
	
	setObservers: function(elements, openCloseBtn, closeBtn)
	{
		var self = this;
		if(elements.length > 0)
		{
			elements.each(function(elem)
			{
				self.roundButtons.push(elem);
				$(elem).observe('click', function()
				{
					var index = self.roundButtons.indexOf(this);
					if(self.currentContent != index)
					{
						if($(self.contents[index]))
							self.showContent(index);
					}
				});
			});
		}
		else
			throw('Finner ikke knapper/triggere. Ukjent årsak med variabel: '+elements);
		
		if($(openCloseBtn))
		{
			$(openCloseBtn).observe('click', function()
			{
				self.clearEffects();
				if(self.isOpen())
					self.closeContainer();
				else
				{
					
					if(typeof currentIndex == 'undefined')
						return false;
					else
						self.openContainer();		
				}
			});
		}
		
		if($(closeBtn))
		{
			$(closeBtn).observe('click', function()
			{
				self.clearEffects();
				if(self.isOpen())
					self.closeContainer(function()
					{
						$(closeBtn).setStyle({display:'none', opacity:'0.0'});
					});
			});
		}
	},
	
	showContent: function(contentIndex)
	{
		
		var self = this;
		var currentIndex = this.currentContent;

		if(typeof currentIndex == 'undefined')
		{
			var oldContent = undefined;
			var currentIndex = 0;
			var newContent = this.contents[contentIndex];
		}
		else
		{
			var oldContent = this.contents[currentIndex];			
			var newContent = this.contents[contentIndex];
		}		
		if($(newContent))
		{
			if($(self.roundButtons[currentIndex]).hasClassName('active'))
				$(self.roundButtons[currentIndex]).removeClassName('active');
				
			$(self.roundButtons[contentIndex]).addClassName('active');
				
			if(this.isOpen())
			{
				if(typeof oldContent != 'undefined')
					$(oldContent).setStyle({display:'none', opacity:'0.0'});
					
				new Effect.Morph(newContent,
				{
					style: 'opacity: 1.0',
					beforeStart: function()
					{
						$(newContent).show();
					},
					duration: 0.4
				});
				this.currentContent = contentIndex;			
			}
			else
			{
				this.openContainer(function()
				{
					if(typeof oldContent != 'undefined')
						$(oldContent).setStyle({display:'none', opacity:'0.0'});
						
					new Effect.Morph(newContent,
					{
						style: 'opacity: 1.0',
						beforeStart: function()
						{
							$(newContent).show();
						},
						duration: 0.4
					});
					
					self.currentContent = contentIndex;
					new Effect.Morph(self.closeBtn,
					{
						style: 'opacity: 1.0',
						beforeStart: function()
						{
							$(self.closeBtn).show();
						},
						duration: 0.2
					});
				});
			}
		}
	},
	
	isOpen: function()
	{
		return this.open;
	},
	
	openContainer: function(runAfter)
	{
		var self = this;

		new Effect.Morph('buyers-guide-choices',
		{
			style: 'width: 544px',
			beforeStart: function()
			{
				self.open = true;
			},
			duration: 0.7,
			queue: { position: 'end', scope: 'buyersguide' }
		});
		new Effect.Morph(self.container,
		{
			style: 'width: 874px',
			beforeStart: function()
			{
				self.open = true;
			},
			duration: 0.7,
			afterFinish: runAfter,
			queue: { position: 'end', scope: 'buyersguide' }
		});
	},
	
	closeContainer: function(runAfter)
	{
		var self = this;
		var currentContent = this.contents[self.currentContent];
		new Effect.Morph('buyers-guide-choices',
		{
			style: 'width: 218px',
			beforeStart: function()
			{
				self.open = true;
			},
			duration: 0.7,
			queue: { position: 'end', scope: 'buyersguide' }
		});
		if(typeof self.currentContent != 'undefined')
		{
			new Effect.Morph(currentContent,
			{
				style: 'opacity: 0.0',
				afterFinish: function()
				{
					$(currentContent).setStyle({display:'none', opacity:'0.0'});
					new Effect.Morph(self.container,
					{
						style: 'width: 274px',
						beforeStart: function()
						{
							self.open = false;
						},
						duration: 0.7,
						afterFinish: runAfter,
						queue: { position: 'end', scope: 'buyersguide' }
					});
					self.roundButtons.each(function(elem)
					{
						if($(elem).hasClassName('active'))
							$(elem).removeClassName('active');
					});
				},
				duration: 0.3
			});
			new Effect.Morph(self.closeBtn,
			{
				style: 'opacity: 0.0',
				afterFinish: function()
				{
					$(self.closeBtn).hide();
				},
				duration: 0.2
			});	
		}
		else
		{
			new Effect.Morph(self.container,
			{
				style: 'width: 274px',
				beforeStart: function()
				{
					self.open = false;
				},
				duration: 0.7,
				afterFinish: runAfter,
				queue: { position: 'end', scope: 'buyersguide' }
			});
			self.roundButtons.each(function(elem)
			{
				if($(elem).hasClassName('active'))
					$(elem).removeClassName('active');
			});
			new Effect.Morph(self.closeBtn,
			{
				style: 'opacity: 0.0',
				afterFinish: function()
				{
					$(self.closeBtn).hide();
				},
				duration: 0.2
			});
		}
		self.currentContent = undefined;

				
	},
	
	clearEffects: function()
	{
		Effect.Queues.get('buyersguide').each(function(fx)
		{
			fx.cancel();
		});
	}
});

Event.observe(window,'load',function()
{
	if($('buyers-guide'))
		var guide = new Buyersguide('buyers-guide-frame', 'bgBtn', 'buyers-guide-choice', 'bgOpenClose', 'bgClose');
	else
		return false;
});