508 images in legend

Hi guys @pld @ukanga @royrutto, I need help on this one (working on #508). So in this branch / PR, I've gotten to the place where I have the right markup to load images, and it even works fine in Chrome (see screenshot below). However, because the images are on a URL that is protected by basic auth, Firefox and Safari throw up log-in dialog boxes (similar to [this](https://cloud.githubusercontent.com/assets/178868/4367344/64a84358-42d4-11e4-94e7-3af2beacbd5f.png)).

So, moving forward, (I THINK) we have the following options:
 * move the images to unsecured URLs on onadata. Maybe we use some hash of the ids and a salt, to generate URLs like `https://stage.ona.io/api/v1/media/decd8b1034a45beb18af7d9129e31da5d7fb58c1.jpg` as opposed to `https://stage.ona.io/api/v1/media/130082.jpg` so they are less guessable, BUT don't require basic auth when accessing those images. Or maybe we let people access the raw s3 image URLs, which probably look like that anyhow, and don't basic-auth lock those?
 * come up with some strategy of authenticating the image within the URL? Maybe this already exists and I don't know about it?
 * get the image as a raw base64encoded ajax string, and render that into the DOM using cljs. Not sure how easy this will be. Plus, that is a lot of data to leave around in the DOM (I think?), and may (?) cause a memory explosion.

![screen shot 2014-10-15 at 12 46 53 pm](https://cloud.githubusercontent.com/assets/178868/4641679/52d3137e-543b-11e4-86f0-61e6a9daad5b.png)