$(document).ready(function() {	

	//Buttons
	$(".selecter span").click(function(e) {
		var btn = $(this);
		
		//Remove old selected button
		var parent = btn.parent();
		parent.find(".button").removeClass("selected");
		
		//Add selected class
		btn.addClass("selected");
		
		//Sidebar
		var sidebar = $("aside.social-sidebar");
		sidebar.prop("class", "social-sidebar");
		
		//Add class of selected button to sidebar
		$(".selecter span.selected").each(function () {
			var css = $(this).data("css");		
			sidebar.addClass(css);
		});
	});
	
	//Icons
	$(".icons a").click(function(e) {
		e.preventDefault();
		
		var icon = $(this);
		
		//Add-remove selected
		if (icon.hasClass("selected")) {
			icon.removeClass("selected");
		} else {
			icon.addClass("selected");
		}
		
		//Add icons to sidebar
		var txt = "<ul>";
		
		$(".icons a.selected").each(function () {
			var cls = $(this).attr("class");	
			var title = $(this).attr("title");			
			txt += '<li><a href="#" class="'+cls+'" target="_blank"><span>'+title+'</span></a></li>';
		}); 
		
		txt += "</ul>";
		
		var sidebar = $("aside.social-sidebar");
		sidebar.html(txt);		
	});

});