var GroupBrowser;
(function($){
	
	GroupBrowser = function(type)
	{
		
		this.init = function()
		{
			this.params={
				type:type,
				order:'kind',
				search:''
			}

			this.elements={
				controls:this.controls(),
				viewer:this.viewer(),
				results:this.results()
			};
			
			this.browseMode=true;
		}
	
		this.appendTo = function(el)
		{
			var container=$('<div>').attr({id:'GroupBrowser'});
			container.append(this.elements.controls);
			container.append(this.elements.viewer);
			container.append(this.elements.results);
			container.appendTo(el);
		}
		
		this.results = function()
		{
			var results = $('<div>').attr({id:'gbResults'});
			return results;
		}
		
		this.controls = function()
		{
			var controls = $('<div>').attr({id:'gbControls'});
			var search = $('<input>').attr({id:'gbSearch',type:'text'}).val('Hit enter to search');
			var orderByKind = $('<a>').attr({id:'gbOrderByKind'}).addClass('gbButton l').text('Categories');
			var orderByAlpha = $('<a>').attr({id:'gbOrderByAlpha'}).addClass('gbButton r').text('Alphabetical');
	
			
			var gb = this;
			
			orderByKind.click(function(){
				gb.orderBy('kind');
			});
			orderByAlpha.click(function(){
				gb.orderBy('name');
			});
			search.focus(function(){
				$(this).val('');
			});
			search.blur(function(){
				$(this).val('Hit enter to search');
			})
			search.keypress(function(e){
				if(e.which==13)
				{
					gb.search($(this).val());
				}
			});
			
			controls.append($('<div>').append(search));
			controls.append($('<div>').append(orderByKind).append(orderByAlpha))

			return controls;
			
		}
		
		this.viewer = function()
		{
			var viewer = $('<div>').attr({id:'gbViewer'});
			return viewer;
		}
		
		this.search = function(term)
		{
			this.params.search=term;
			this.getGroups();
			if(!this.browseMode)this.closeViewer();
		}
		
		this.orderBy = function(order)
		{
			this.params.search='';
			this.params.order=order;
			this.getGroups();
			if(!this.browseMode)this.closeViewer();
		}
		
		this.getGroups = function()
		{
			this.updateUI();
			
			var groupList = $('<ol>');
			var gb=this;
			$.getJSON('http://www.susu.org/php/ajax-groups.php?callback=?',this.params,function(data){
				if(!data){groupList.append($('<li>').text('No results.'));}
				else
				{
					$.each(data,function(s,groups){
						var sli = $('<li>');
						var sol = $('<ol>');
						sli.text(s);
						sli.append(sol);
						$.each(groups,function(i,group){
							var gli=$('<li>');
							gli.text(group.name);
							sol.append(gli)
							gli.click(function(){
								gb.displayGroup(group);
							})
						})
						groupList.append(sli);
					});
				}
				
				gb.elements.results.empty();
				gb.elements.results.append(groupList);
				
				});
		}
		
		this.updateUI = function()
		{
			if(this.params.search!=''){$('#gbOrderByKind').removeClass('selected'); $('#gbOrderByAlpha').removeClass('selected');}
			else if(this.params.order=='kind'){$('#gbOrderByKind').addClass('selected'); $('#gbOrderByAlpha').removeClass('selected');}
			else if(this.params.order=='name'){$('#gbOrderByAlpha').addClass('selected'); $('#gbOrderByKind').removeClass('selected');}
		}
		
		this.displayGroup = function(group)
		{
			var gb=this;
			var d = $('<div>').addClass('gbGroup');
			var b = $('<div>').addClass('gbGroupHeader');
			b.append($('<div>').addClass('gbCloseButton').click(function(){gb.closeViewer();}));
			b.append($('<span>').addClass('gbGroupTitle').text(group.name));
			if(group.url)d.append($('<a>').addClass('gbGroupURL').text(group.url).attr({href:group.url}));
			if(group.email)d.append($('<a>').addClass('gbGroupEmail').text(group.email).attr({href:'mailto:'+group.email}));
			if(group.fb)d.append($('<a>').addClass('gbGroupFacebook').text('Find us on Facebook').attr({href:group.fb}));
			if(group.description)d.append($('<p>').addClass('gbGroupDescription').text(group.description));			
			
			this.elements.viewer.empty();
			this.elements.viewer.append(b);
			this.elements.viewer.append(d);
			this.elements.viewer.animate({left:'0%'});
			this.elements.results.animate({left:'-100%'});
			
			this.browseMode=false;
	
		}
		
		this.closeViewer = function()
		{
			this.elements.viewer.animate({left:'100%'});
			this.elements.results.animate({left:'0%'});
			
			this.browseMode=true;
		}
		
		this.init();
		
	}
	
})(jQuery);