Index: wp-admin.css
===================================================================
--- wp-admin.css	(revision 2925)
+++ wp-admin.css	(working copy)
@@ -148,7 +148,7 @@
 	line-height: 130%;
 }
 
-textarea, input, select, iframe#imageup {
+textarea, input, select {
 	background: #f4f4f4;
 	border: 1px solid #b2b2b2;
 	color: #000;
@@ -157,12 +157,13 @@
 	padding: 3px;
 }
 
-iframe#imageup {
-	margin: 0px;
+#imageup {
+	border-style: none;
 	padding: 0px;
-	border: 1px solid #ccc;
-	height: 13em;
-	width: 98%;
+	margin-bottom: 16px;
+	height: 180px;
+	width: 100%;
+	overflow-y: hidden;
 }
 
 .alignleft {
Index: edit-form-advanced.php
===================================================================
--- edit-form-advanced.php	(revision 2925)
+++ edit-form-advanced.php	(working copy)
@@ -172,13 +172,10 @@
 
 <?php do_action('edit_form_advanced'); ?>
 
+<iframe border="0" src="image-uploading.php?action=view&amp;post=<?php echo 0 == $post_ID ? $temp_ID : $post_ID; ?>" id="imageup">This feature requires iframe support.</iframe>
+
 <div id="advancedstuff" class="dbx-group" >
 
-<fieldset id="imageuploading" class="dbx-box">
-<h3 class="dbx-handle"><?php _e('Image Uploading') ?></h3>
-<div class="dbx-content"><iframe src="image-uploading.php?action=view&amp;post=<?php echo 0 == $post_ID ? $temp_ID : $post_ID; ?>" id="imageup"></iframe></div>
-</fieldset>
-
 <fieldset id="postexcerpt" class="dbx-box">
 <h3 class="dbx-handle"><?php _e('Optional Excerpt') ?></h3>
 <div class="dbx-content"><textarea rows="1" cols="40" name="excerpt" tabindex="7" id="excerpt"><?php echo $post->post_excerpt ?></textarea></div>
Index: image-uploading.php
===================================================================
--- image-uploading.php	(revision 2925)
+++ image-uploading.php	(working copy)
@@ -1,4 +1,5 @@
 <?php
+
 require_once('admin.php');
 
 if (!current_user_can('edit_posts'))
@@ -22,7 +23,17 @@
 }
 
 $post = (int) $post;
+$images_width = 1;
 
+function get_udims($width, $height) {
+	if ( $height < 96 && $width < 128 )
+		return array($width, $height);
+	elseif ( $width / $height > 4 / 3 )
+		return array(128, (int) ($height / $width * 128));
+	else
+		return array((int) ($width / $height * 96), 96);
+}
+
 switch($action) {
 case 'save':
 
@@ -113,16 +124,7 @@
 $imagesize = getimagesize($file);
 $imagedata['width'] = $imagesize['0'];
 $imagedata['height'] = $imagesize['1'];
-if ( $imagedata['height'] < 96 && $imagedata['width'] < 128 ) {
-	$uheight = $imagedata['height'];
-	$uwidth = $imagedata['width'];
-} elseif ( $imagedata['width'] / $imagedata['height'] > 4 / 3 ) {
-	$uwidth = 128;
-	$uheight = $imagedata['height'] / $imagedata['width'] * $uwidth;
-} else {
-	$uheight = 96;
-	$uwidth = $imagedata['width'] / $imagedata['height'] * $uheight;
-}
+list($uwidth, $uheight) = get_udims($imagedata['width'], $imagedata['height']);
 $imagedata['hwstring_small'] = "height='$uheight' width='$uwidth'";
 $imagedata['file'] = $file;
 
@@ -133,73 +135,26 @@
 die;
 
 case 'upload':
-?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<script type="text/javascript">
-			function validateImageName() {
-				/* This is more for convenience than security. Server-side validation is very thorough.*/
-				obj = document.getElementById('upload');
-				r = /.jpg$|.gif$|.png$/i;
-				if ( obj.value.match(r) )
-					return true;
-				alert('Please select a JPG, PNG or GIF file.');
-				obj.parentNode.reset();
-				return false;
-			}
-			function cancelUpload() {
-				o = document.getElementById('uploadForm');
-				o.method = 'GET';
-				o.action.value = 'view';
-				o.submit();
-			}
-		</script>
-		<style type="text/css">
-			label {
-				float: left;
-				width: 18%;
-			}
-			#title, #descr {
-				width: 80%;
-				margin-top: 2px;
-			}
-			#descr {
-				height: 3em;
-				v-align: top;
-			}
-			#buttons {
-				width: 98%;
-				text-align: right;
-			}
-		</style>
-	</head>
-	<body>
-		<form enctype="multipart/form-data" id="uploadForm" method="POST" action="image-uploading.php" onsubmit="return validateImageName()">
-			<label for="upload">Image:</label><input type="file" id="upload" name="image" onchange="validateImageName()" /><br />
-			<label for="title">Title:</label><input type="text" id="title" name="imgtitle" /><br />
-			<label for="descr">Description:</label><input type="textarea" name="descr" id="descr" value="" /><br />
-			<input type="hidden" name="action" value="save" />
-			<input type="hidden" name="post" value="<?php echo $post; ?>" />
-			<input type="hidden" name="all" value="<?php echo $all; ?>" />
-			<div id="buttons">
-				<input type="submit" value="Upload" />
-				<input type="button" value="Cancel" onclick="cancelUpload()" />
-			</div>
-		</form>
-	</body>
-</html>
-<?php
 
+$current_1 = ' class="current"';
+$back = $next = false;
 break;
 
 case 'view':
 
-if ( $post && empty($all) )
+// How many images do we show? How many do we query?
+$num = 5;
+$double = $num * 2;
+
+if ( $post && empty($all) ) {
 	$and_post = "AND post_parent = '$post'";
+	$current_2 = ' class="current"';
+} else {
+	$current_3 = ' class="current"';
+}
 
 if ( $last )
-	$start = $wpdb->get_var("SELECT count(ID) FROM $wpdb->posts WHERE post_status = 'object' AND left(post_type, 5) = 'image' $and_post") - 5;
+	$start = $wpdb->get_var("SELECT count(ID) FROM $wpdb->posts WHERE post_status = 'object' AND left(post_type, 5) = 'image' $and_post") - $num;
 else
 	$start = (int) $start;
 
@@ -209,124 +164,213 @@
 if ( '' == $sort )
 	$sort = "ID";
 
-$images = $wpdb->get_results("SELECT ID, post_date, post_title, guid FROM $wpdb->posts WHERE post_status = 'object' AND left(post_type, 5) = 'image' $and_post ORDER BY $sort LIMIT $start, 10", ARRAY_A);
+$images = $wpdb->get_results("SELECT ID, post_date, post_title, guid FROM $wpdb->posts WHERE post_status = 'object' AND left(post_type, 5) = 'image' $and_post ORDER BY $sort LIMIT $start, $double", ARRAY_A);
 
-//if ( count($images) == 0 )
-//	header("Location: ".basename(__FILE__)."?post=$post&all=$all&action=upload");
-
-if ( count($images) > 5 ) {
-	$next = $start + count($images) - 5;
+if ( count($images) > $num ) {
+	$next = $start + count($images) - $num;
 } else {
 	$next = false;
 }
 
 if ( $start > 0 ) {
-	$back = $start - 5;
+	$back = $start - $num;
 	if ( $back < 1 )
 		$back = '0';
 } else {
 	$back = false;
 }
 
+$uwidth_sum = 0;
+$images_html = '';
+if ( count($images) > 0 ) {
+	$images = array_slice( $images, 0, $num );
+	foreach ( $images as $key => $image ) {
+		$image = array_merge($image, get_post_meta($image['ID'], 'imagedata', true) );
+		list($image['uwidth'], $image['uheight']) = get_udims($image['width'], $image['height']);
+		$uwidth_sum += $image['uwidth'];
+		$images_html .= "<div class='image left'><a href='{$image['guid']}' onclick='return false;' title='{$image['post_title']}'><img src='{$image['guid']}' alt='{$image['post_title']}' {$image['hwstring_small']} /></a></div>\n";
+	}
+}
+
+$images_width = $uwidth_sum + ( count($images) * 5 ) + 15;
+
+break;
+
+default:
+die('This script was not meant to be called directly.');
+}
+
 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<style type="text/css">
-		form {
-			display: inline;
-		}
-		#images, #buttons {
-			position: absolute;
-			left: 0px;
-			width: 98%;
-			text-align: center;
-		}
-		#images {
-			top: 0px;
-		}
-		#buttons {
-			top: 112px;
-		}
-	</style>
+<meta http-equiv="imagetoolbar" content="no" />
+<script type="text/javascript">
+function validateImageName() {
+/* This is more for convenience than security. Server-side validation is very thorough.*/
+obj = document.getElementById('upload');
+r = /.jpg$|.gif$|.png$/i;
+if ( obj.value.match(r) )
+return true;
+alert('Please select a JPG, PNG or GIF file.');
+return false;
+}
+function cancelUpload() {
+o = document.getElementById('uploadForm');
+o.method = 'GET';
+o.action.value = 'view';
+o.submit();
+}
+</script>
+<style type="text/css">
+body {
+font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
+border: none;
+margin: 0px;
+height: 150px;
+background: rgb(223, 232, 241);
+}
+form {
+margin: 6px 2px 0px 6px;
+}
+#wrap {
+clear: both;
+margin: 0px;
+padding: 0px;
+height: 133px;
+width: 100%;
+overflow: auto;
+}
+#images {
+clear: both;
+margin: 0px;
+padding: 5px 5px;
+height: 100px;
+width: <?php echo $images_width; ?>px;
+}
+.image {
+margin-right: 5px;
+}
+.image * {
+margin: 0px;
+padding: 0px;
+border: 0px;
+}
+.image a, .image a img, .image a:hover img, .image a:visited img, .image a:active img {
+text-decoration: none;
+float: left;
+display: block;
+text-align: center;
+}
+#menu {
+margin: 0px;
+list-style: none;
+background: rgb(109, 166, 209);
+padding: 4px 0px 0px 8px;
+text-align: left;
+border-bottom: 3px solid rgb(68, 138, 189);
+}
+#menu li {
+display: inline;
+margin: 0px;
+}
+#menu a, #menu a:visited, #menu a:active {
+padding: 1px 3px 3px;
+text-decoration: none;
+color: #345;
+background: transparent;
+}
+#menu a:hover {
+background: rgb(203, 214, 228);
+color: #000;
+}
+#menu .current a, #menu .current a:hover, #menu .current a:visited, #menu .current a:active {
+background: rgb(223, 232, 241);
+color: #000;
+border-right: 2px solid rgb(20, 86, 138);
+}
+.tip {
+color: rgb(109, 166, 209);
+padding: 1px 3px;
+}
+.inactive {
+color: #68a;
+padding: 1px 3px;
+}
+.left {
+float: left;
+}
+.right {
+float: right;
+}
+.center {
+text-align: center;
+}
+#menu li.spacer {
+margin-left: 40px;
+}
+label {
+float: left;
+width: 18%;
+}
+#title, #descr {
+width: 80%;
+margin-top: 2px;
+}
+#descr {
+height: 35px;
+v-align: top;
+}
+#buttons {
+width: 98%;
+margin-top: 2px;
+text-align: right;
+}
+</style>
 </head>
 <body>
-	<div id="images">
-<?php
-if ( count($images) > 0 ) {
-	$imagerow = '';
-	$i = 1;
-	foreach ( $images as $image ) {
-		if ( $i++ > 5 ) break;
-		$image = array_merge($image, get_post_meta($image['ID'], 'imagedata', true) );
-?>
-	<a href="<?php echo $image['guid']; ?>" disabled="true">
-		<img src="<?php echo $image['guid']; ?>" alt="<?php echo $image['post_title']; ?>" <?php echo $image['hwstring_small']; ?> />
-	</a>
-<?php
-	}
-}
-?>
-	<div>
-	<div id="buttons">
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="<?php echo $all; ?>" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="hidden" name="start" value="0" />
-		<input type="submit" value="| < <" <?php if ( false === $back ) echo 'disabled="true" ' ?>/>
-	</form>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="<?php echo $all; ?>" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="hidden" name="start" value="<?php echo $back; ?>" />
-		<input type="submit" value="< < < < <" <?php if ( false === $back ) echo 'disabled="true" ' ?>/>
-	</form>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="upload" />
-		<input type="hidden" name="all" value="<?php echo $all; ?>" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="submit" value="Upload New" />
-	</form>
-<?php if ( $all ) : ?>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="submit" value="Browse Attached" />
-	</form>
+<ul id="menu">
+<li<?php echo $current_1; ?>><a href="image-uploading.php?action=upload&amp;post=<?php echo $post; ?>&amp;all=<?php echo $all; ?>">Upload Photo</a></li>
+<li<?php echo $current_2; ?>><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>">Browse Attached</a></li>
+<li<?php echo $current_3; ?>><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>&amp;all=true">Browse All</a></li>
+<li> </li>
+<?php if ( false !== $back ) : ?>
+<li class="spacer"><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>&amp;all=<?php echo $all; ?>&amp;start=0" title="First">|&lt;</a></li>
+<li><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>&amp;all=<?php echo $all; ?>&amp;start=<?php echo $back; ?>" title="Back">&lt;&lt;</a></li>
 <?php else : ?>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="true" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="submit" value="Browse All" />
-	</form>
+<li class="inactive spacer">|&lt;</li>
+<li class="inactive">&lt;&lt;</li>
 <?php endif; ?>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="<?php echo $all; ?>" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="hidden" name="start" value="<?php echo $next; ?>" />
-		<input type="submit" value="> > > > >" <?php if ( false === $next ) echo 'disabled="true" ' ?>/>
-	</form>
-	<form action="image-uploading.php" method="GET">
-		<input type="hidden" name="action" value="view" />
-		<input type="hidden" name="all" value="<?php echo $all; ?>" />
-		<input type="hidden" name="post" value="<?php echo $post; ?>" />
-		<input type="hidden" name="last" value="true" />
-		<input type="submit" value="> > |" <?php if ( false === $next ) echo 'disabled="true" ' ?>/>
-	</form>
-	</div>
-<?php // echo "<pre>".print_r($images,1)."</pre>";
-?>
+<?php if ( false !== $next ) : ?>
+<li><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>&amp;all=<?php echo $all; ?>&amp;start=<?php echo $next; ?>" title="Next">&gt;&gt;</a></li>
+<li><a href="image-uploading.php?action=view&amp;post=<?php echo $post; ?>&amp;all=<?php echo $all; ?>&amp;last=true" title="Last">&gt;|</a></li>
+<?php else : ?>
+<li class="inactive">&gt;&gt;</li>
+<li class="inactive">&gt;|</li>
+<?php endif; ?>
+</ul>
+<?php if ( $action == 'view' ) : ?>
+<span class="left tip">Drag and drop photos to post</span>
+<span class="right tip">Click photos for more options</span>
+<div id="wrap">
+<div id="images">
+<?php echo $images_html; ?>
+</div>
+</div>
+<?php elseif ( $action = 'upload' ) : ?>
+<div class="center tip">Duplicated filenames will be numbered (photo.jpg, photo1.jpg, etc.)</div>
+<form enctype="multipart/form-data" id="uploadForm" method="POST" action="image-uploading.php" onsubmit="return validateImageName()">
+<label for="upload">Image:</label><input type="file" id="upload" name="image" onchange="validateImageName()" />
+<label for="title">Title:</label><input type="text" id="title" name="imgtitle" />
+<label for="descr">Description:</label><input type="textarea" name="descr" id="descr" value="" />
+<input type="hidden" name="action" value="save" />
+<input type="hidden" name="post" value="<?php echo $post; ?>" />
+<input type="hidden" name="all" value="<?php echo $all; ?>" />
+<div id="buttons">
+<input type="submit" value="Upload" />
+<input type="button" value="Cancel" onclick="cancelUpload()" />
+</div>
+</form>
+<?php endif; ?>
 </body>
 </html>
-<?php
-die;
-
-default:
-die('This script was not meant to be called directly.');
-}
-?>
