var AjaxDropdownMenu = Class.create(
{
	initialize: function(elemClassname, prefix, menuContainer, styleObj)
	{
		if(!$(menuContainer))
			return false;
		
		this.open = false;
		this.currentIndex = undefined;
		this.prefix = prefix || 'menu_';
		this.menuContainer = menuContainer;
		this.styleObj = styleObj;
		this.setObservers(elemClassname);
	},
	
	setObservers: function(elemClassname)
	{
		var self = this;
		$$('.'+elemClassname).each(function(elem)
		{
			$(elem).setAttribute('onclick', 'return false;');
			$(elem).setAttribute('href', 'javascript:return false;');
			$(elem).observe('click', function()
			{
				
				if($$('a.active')[0])
				{
					var last = $($$('a.active')[0]).id;
					$($$('a.active')[0]).removeClassName('active');
				}
				else
					var last = '';
					
				if(!$(this).hasClassName('active'))
					$(this).addClassName('active');
			
				self.changeContent(this.id, last);
			});
			
		}.bind(this));
	},
	
	changeContent: function(elemId, lastElemId)
	{
		if(lastElemId == '')
			lastElemId = elemId;
		
		var self = this;
		this.clearEffects();
		var menuContainer = this.menuContainer;
		var catId = $(elemId).getAttribute('rel');
		if(this.currentIndex != (this.prefix+catId))
		{			
			if(this.open == false)
			{
					this.openMenu(function()
					{
						self.open = true;
						self.getSite(catId, function(transport)
						{
							var listContainer = new Element('div', {id:'listContainer'});
							$(listContainer).setStyle({'opacity':'0.0'});
							$(listContainer).innerHTML = transport.responseText;
							$(menuContainer).update(listContainer);
						//	new Effect.Appear('listContainer');
							var ef = new Effect.Morph('listContainer',
							{
								style: 'opacity:1.0',
								queue: { position : 'end', scope : 'dropdownMenu' },
								duration: 0.3
							}); 
						});
					});
				
			}
			else
			{
				if(elemId != lastElemId)
				{
					new Effect.Morph('listContainer',
					{
						style: 'opacity:0.0',
						queue: { position : 'end', scope : 'dropdownMenu' },
						duration: 0.2,
						afterFinish: function()
						{
							$('listContainer').remove();
							self.getSite(catId, function(transport)
							{
								var listContainer = new Element('div', {id:'listContainer'});
								$(listContainer).setStyle({'opacity':'0.0'});
								$(listContainer).innerHTML = transport.responseText;
								$(menuContainer).update(listContainer);
								new Effect.Morph(listContainer,
								{
									style: 'opacity:1.0',
									queue: { position : 'end', scope : 'dropdownMenu' },
									duration: 0.2
								});
							});
						}
					});
				}
				else
				{
					this.closeMenu(function()
					{
						
						new Effect.Morph('listContainer',
						{
							style: 'opacity:0.0',
							queue: { position : 'end', scope : 'dropdownMenu' },
							duration: 0.2,
							afterFinish: function()
							{
								self.open = false;
								$('listContainer').remove();
								$($$('a.active')[0]).removeClassName('active');
							}
						});
					});
				}
			}
		}
		
	},
	
	getSite: function(catId, afterFinish)
	{
		new Ajax.Request('/index.php',
		{
			method: 'get',
			parameters: {
				'c_' : 'UpSourceMenuController',
				'm_' : 'getMenu',
				'cid' : catId
			},
			onSuccess: afterFinish
		});
	},
	
	openMenu: function(afterFinish)
	{
		var styleObj = this.styleObj;
		var menuContainer = this.menuContainer;
		new Effect.Morph(menuContainer,
		{
			style: 'height: '+styleObj.heightTo+'; padding:  10px 22px 10px 21px;',
			queue: { position: 'end', scope: 'dropdownMenu' },
			duration: 0.4,
			afterFinish: afterFinish
		});
	},
	
	closeMenu: function(beforeStart)
	{
		var styleObj = this.styleObj;
		var menuContainer = this.menuContainer;
		new Effect.Morph(menuContainer,
		{
			style: 'height: '+styleObj.heightFrom+'; padding:  0px 22px 0px 21px;',
			queue: { position: 'end', scope: 'dropdownMenu' },
			duration: 0.4,
			beforeStart: beforeStart
		});
	},
	
	clearEffects: function()
	{
		var eff = Effect.Queues.get('dropdownMenu');
		eff.each(function(obj)
		{
			obj.cancel();
			//obj.stop();
		});
	}
});
Event.observe(window, 'load', function()
{
	var UpSourceDropDown = new AjaxDropdownMenu('topBtn', 'menu_', 'downContentContainer', 
	{ 
		heightFrom: '0px', 
		heightTo: '153px' 
	});
});