--- trunk/lib/Frey/IconBrowser.pm	2008/11/28 23:22:22	607
+++ trunk/lib/Frey/IconBrowser.pm	2008/11/28 23:28:12	608
@@ -14,9 +14,18 @@
 	default => 'static/icons/fugue/',
 );
 
+has show_names => (
+	is => 'rw',
+	isa => 'Bool',
+	required => 1,
+	default => 1,
+);
+
 sub as_markup {
 	my ($self) = @_;
 
+	$self->title( 'icons - ' . $self->path );
+
 	my $extension = '\.(?:png)$';
 
 	opendir(my $dir, $self->path) || die "can't opendir ", $self->path, ": $!";
@@ -25,19 +34,46 @@
 
 	my ( $combined_path, $styles ) = $self->combine_images( map { $self->path . '/' . $_ } @icons );
 
-	my $html;
+	my $width = 0;
+	foreach ( @icons ) {
+		my $l = length($_);
+		$width = $l if $l > $width;
+	}
+
+	$width = 2 if ! $self->show_names;
+
+	$self->add_css(qq|
+		h1 { font-size: 20px }
+		/* group */
+		div.g {
+			float: left;
+			clear: both;
+		}
+		/* individual icon */
+		div.i {
+			color: #888;
+			width: ${width}ex;
+			float: left;
+		}
+	|);
+
+	my $html = '<div class="g">';
 	my $base;
 
 	foreach my $icon ( @icons ) {
 		my $name = $icon;
 		$name =~ s{$extension}{};
 
-		$base ||= $name; # seed with first
+		if ( ! $base ) {
+			$base = $name;
+			$html .= qq|<h1>$name</h1>|;
+		}
+
 		my $desc = '';
 
 		my $bl = length $base;
 
-		if ( substr($name, 0, $bl) eq $base ) {
+		if ( $name =~ m{_} && substr($name, 0, $bl) eq $base ) {
 			($name,$desc) = (
 				substr($name,0,$bl),
 				substr($name,$bl)
@@ -45,7 +81,11 @@
 		} else {
 			$base = $name;
 			warn "# new base $base" if $self->debug;
-			$html .= qq|<hr>\n|;
+			$html .= qq|
+				</div>
+				<div class="g">
+				<h1>$name</h1>
+			|;
 		}
 
 #		$html .= qq|<img src="/| . $self->path . qq|/$icon" alt="$icon"> <b>$name</b>$desc<br/>\n|;
@@ -54,10 +94,15 @@
 		my $path = $self->path . '/' . $icon;
 
 		my $pic = $styles->{$path} || die "can't find pic for $path in ",dump( $styles );
-		$html .= qq|<span title="$icon">$pic <b>$name</b>$desc</span>\n|;
+		$html .= ''
+			. qq|<div title="$icon" class="i">$pic|
+			. ( $self->show_names ? qq|<b>$name</b>$desc| : '' )
+			. qq|</div>\n|
+			;
 	}
 
 
+	$html .= '</div>';
 #	$html .= qq|<img src="$combined_path">|;
 	return $html;
 }