Menu = {};

Menu.Dropdown = function() {
	var options = ({
		listenTo: null,
		attr: null
	}, arguments[0] || { });
	
	jQuery.extend(this, options);
	
	this.isVisible = false;
	this.el = null;
	this.container = null;

	this.setup();
};

Menu.Dropdown.prototype = {
	setup: function() {
		this.createDom();
		this.setListeners();
	},
	
	createDom: function() {
		var container = $('<div>').addClass('dropdown-menu-bg').appendTo('body');
		var domEl = $('<ul>').addClass('dropdown-menu').appendTo('body');
		domEl.css('position','absolute');
		if($('#'+this.listenTo).attr(this.attr)) {
			var arr = $('#'+this.listenTo).attr(this.attr).split(',');			
			var url = $('#'+this.listenTo).attr('href');
			$('#'+this.listenTo).removeAttr('href');
			for(var i=0;i<arr.length;i++) {
				$('<li>').html('<a href="'+url+arr[i]+'">'+arr[i]+'</a>').appendTo(domEl);
			}
		};
		this.el = domEl;
		this.container = container;
		this.hide();
	},
	
	setListeners: function() {
		var parent= this;
		$('#'+this.listenTo).click(function() {			
			parent.check();
		});
		this.container.click(function() {			
			parent.check();
		});
	},
	
	check: function() {
		if(!this.isVisible) {
			this.show();
		} else {
			this.hide();
		};
	},
	
	show: function() {
		this.isVisible = true;
		this.container.css('top','0px');
		this.container.css('left','0px');
		this.el.css('left',$('#'+this.listenTo).offset().left-10);
		this.el.css('top',$('#'+this.listenTo).offset().top+$('#'+this.listenTo).height()-10);
	},
	
	hide: function() {
		this.isVisible = false;
		this.container.css('top','-10000px');
		this.container.css('left','-10000px');
		this.el.css('top','-10000px');
		this.el.css('left','-10000px');
	}
};