Improve product image handling

There's currently a few issues with the way the dashboard handles product images.

https://github.com/tangentlabs/django-oscar/blob/master/oscar/templates/oscar/partials/image_input_widget.html

- [ ] If no image is set, an empty ``<img>`` is rendered. It's not visible as it's overlaid by both a button and the <input> field, but at least in Chrome changes the mouse cursor
- [ ] The inline(!) javascript uses relative addressing via ``.next()`` to hide or show the upload button
- [ ] Semantically, the button is never used, and merely for display purposes. Maybe one could remove it, and instead have an always visible ``<img>`` which looks something like this
![button](http://static4.depositphotos.com/1000993/391/v/450/dep_3913351-Single-Circle-upload-button.jpg)
- [ ] As everything else has an immediate reaction, it would be nice if deleting pictures would be instant as well. Or at least the image becoming grayed out when clicking 'Delete'
- [ ] The input field is, at least in Chrome, 100 px to the right. That causes the mouse cursor to not display as expected in the left half of the area. This is caused by absolute positioning and some not widely supported transforming: https://github.com/tangentlabs/django-oscar/blob/master/oscar/static/oscar/less/dashboard.less#L771
- [ ] It would be nice if images could be dragged & dropped. Seems easy enough: http://djangosnippets.org/snippets/1053/