Script to clean up the Heart Internet Customer Control Panel (tested in Firefox, using Firebug)

heart-cleanup.js

/**
 * Script to clean up the Heart Internet Customer Control Panel
 *
 * See this link for a preview of how the panel looks after a cleanup
 * @link http://imgur.com/KJ1JX
 * 
 * Works as a firebug script, or can be minified and run from a bookmarklet
 * @link http://fmarcia.info/jsmin/test.html
 *
 * Panel contents is customisable by editing the 'sections' object
 */
javascript:(function ($)
{
	/**
	 * Sections
	 * 
	 * - format is 'Panel Name':['icon', 'icon', 'icon']
	 * - use ~ in front of panel names to minimise the panel on creation
	 * - icons are matched and moved based on existing icon text
	 * - custom user icons elements take the form of [text, url, icon src]
	 */

	// ------------------------------------------------------------------------------
	// sections
	
		var sections =
		{
			'Manage':
			[
				'Manage VPS and Hybrid Servers',
				'Manage Domain Names',
				['Customer Services','ticket.cgi', '/images/boxed-icons/hp/17_support_ticket.png'],
				['Support Tickets','ticket.cgi?action=list', '/images/boxed-icons/d/11_opt_out_of_whois_fake.png'],
			],
			'~Tools':
			[
				'Support Database',
				'Renew Services',
				'Order Domain Names',
				'Transfer a Domain',
				'Contacts & Billing Details',
				["System Status","http://www.webhostingstatus.com/","/images/boxed-icons/i/13_system_status_new.png"],
			],
			'~Order':
			[
				'Order Web Hosting',
				'Order VPS',
				'Order Dedicated Servers',
				'Order Hybrid Servers',
				'Order Add-ons',
			],
		};

	// ------------------------------------------------------------------------------
	// functions
	
		function makeIcon($body, items, i)
		{
			// variables
				var name = items[i];
				var $icon = icons[name];
				
			// if there's an icon, move it
				if($icon)
				{
					$icon.appendTo($body);
					delete icons[name];
				}
				
			// otherwise, it should be a 2 or 3 element array, defining a custom icon
				else
				{
					// create an empty icon we can modify
						$icon = $dummyIcon.clone();
						
					// update the text of the new icon
						var text = $.trim($icon.text());
						var html = $icon
							.html()
							.replace(new RegExp(text, 'g'), name[0]);
							
					// assign properties
						$icon
							.html(html)
							.find('a')
								.attr('title', name[0])
								.attr('href', name[1])
								.find('div')
									.css('background-image', 'url(' +(name[2] || '/images/boxed-icons/i/hi_cp.png')+ ')');
						
					// append to body
						$icon.appendTo($body);
				}
		}
	
		function setBoxState($box, state)
		{
			$box.find('.title a span').attr('class', state ? 'up-arrow' : 'down-arrow');
			$box.find('.icon-box-body').css('display', state ? 'block' : 'none');
		}
		
		function makeBox(title, items)
		{
			// update box html (ids)
				var html = $dummyBox.get(0).outerHTML.replace(/box-\d+/g, 'box-' + (++index));
				
			// variables
				var $box = $(html);
				var $body = $box.find('.icon-box-body');
	
			// set up box
				$box.appendTo($list);
				$box.find('.draggable-title').text(title.replace('~', ''));
				
			// minimise box
				setBoxState($box, title.indexOf('~') == -1);
 
			// replace box toggle handler
				$box.find('.title a').bind('click', function(){
					setBoxState($box, ! $body.is(':visible'));
					return false;
					});
					
			// add icons
				for(var i = 0; i <= items.length - 1; i++) // the <= allows the code to be minified, then dragged from a web page into the bookmarks toolbar, without being mistaken for an HTML tag
				{
					makeIcon($body, items, i);
				}
	   }
	   
	   
	// ------------------------------------------------------------------------------
	// code

		// objects
			var $list = $('#icon-box-list');
			var $icons = $('.icon-and-text');
			var $boxes = $('.draggable-icon-box').remove();
			var $dummyBox = $($boxes[0]);
			var $dummyIcon = $($icons.get(0)).clone();
			
		// variables
			var icons = {};
			var index = 0;
			
		// cache icons
			$icons.each(function(i, e){
				var text = $.trim($(e).text());
				icons[text] = $(e).remove();
			});
			
		// set up html for initial box
			$dummyBox.find('.title a').removeAttr('onclick').attr('href', '#');
			$dummyBox.find('.icon-box-body').attr('style', 'background-color:#FFF').children().remove();
			
		// create boxes and icons
			for(var title in sections)
			{
				makeBox(title, sections[title]);
			}
			
		// dump unused icons in "unused" panel
			var keys = $.map(icons, function(value, key) { return key; }).sort();
			makeBox('~Unused', keys);
			
		// tidy up right-hand nav
			$('#content-right h2:not(:first-of-type), #content-right ul:not(:first-of-type)').remove();
			
		// make the containers draggable again
			make_draggable();
			
		// return unused icon names
			return 'Items not used: ' + keys.sort().join(', ');
		

})(jQuery);void(0);

Drag the following code to your browser's Bookmarks toolbar to create a reusable Bookmarklet (triple-click to select):

javascript:(function($){var sections={'Manage':['Manage VPS and Hybrid Servers','Manage Domain Names',['Customer Services','ticket.cgi','/images/boxed-icons/hp/17_support_ticket.png'],['Support Tickets','ticket.cgi?action=list','/images/boxed-icons/d/11_opt_out_of_whois_fake.png'],],'Tools':['Support Database','Renew Services','Order Domain Names','Transfer a Domain','Contacts & Billing Details',["System Status","http://www.webhostingstatus.com/","/images/boxed-icons/i/13_system_status_new.png"],],'Order':['Order Web Hosting','Order VPS','Order Dedicated Servers','Order Hybrid Servers','Order Add-ons',],};function makeIcon($body,items,i){var name=items[i];var $icon=icons[name];if($icon){$icon.appendTo($body);delete icons[name];}else {$icon=$dummyIcon.clone();var text=$.trim($icon.text());var html=$icon.html().replace(new RegExp(text,'g'),name[0]);$icon.html(html).find('a').attr('title',name[0]).attr('href',name[1]).find('div').css('background-image','url('+(name[2]||'/images/boxed-icons/i/hi_cp.png')+')');$icon.appendTo($body);}}function setBoxState($box,state){$box.find('.title a span').attr('class',state?'up-arrow':'down-arrow');$box.find('.icon-box-body').css('display',state?'block':'none');}function makeBox(title,items){var html=$dummyBox.get(0).outerHTML.replace(/box-\d+/g,'box-'+(++index));var $box=$(html);var $body=$box.find('.icon-box-body');$box.appendTo($list);$box.find('.draggable-title').text(title.replace('',''));setBoxState($box,title.indexOf('')==-1);$box.find('.title a').bind('click',function(){setBoxState($box,!$body.is(':visible'));return false;});for(var i=0;i<=items.length-1;i++){makeIcon($body,items,i);}}var icons={};var index=0;var $list=$('#icon-box-list');var $icons=$('.icon-and-text');var $boxes=$('.draggable-icon-box').remove();var $dummyBox=$($boxes[0]);var $dummyIcon=$($icons.get(0)).clone();$icons.each(function(i,e){var text=$.trim($(e).text());icons[text]=$(e).remove();});$dummyBox.find('.title a').removeAttr('onclick').attr('href','#');$dummyBox.find('.icon-box-body').attr('style','background-color:#FFF').children().remove();for(var title in sections){makeBox(title,sections[title]);}var keys=$.map(icons,function(value,key){return key;}).sort();makeBox('~Unused',keys);$('#content-right h2:not(:first-of-type), #content-right ul:not(:first-of-type)').remove();make_draggable();return'Items not used: '+keys.sort().join(', ');})(jQuery);void(0);