Products.js Javascript Fixes

When viewing a product in the store that has variants with images such as:

http://localhost:3000/products/ruby-on-rails-baseball-jersey

the javascript code switches the thumbnail images displayed based on the variant that is chosen.  So in the above example, clicking on the __Size: S, Color: Red__ option switches the thumbnails to show the red jersey options.

The problem is that the __Main__ image for the product will only show the __main product__ image if that image exists.

So, using the above example, clicking on the __Size: S, Color: Red__ option continues to show the __black__ (maybe navy blue) image, requiring that the user hover over, or click the red thumbnail in order to view the red shirt.

It is my opinion that the __Red__ shirt should be displayed by default in the main image automatically if the __Size: S, Color: Red__ option was selected.

This can be accomplished by changing the __show_variant_images__ method in the product.js.coffee file that currently looks like this:

```coffeescript
show_variant_images = (variant_id) ->
  ($ 'li.vtmb').hide()
  ($ 'li.vtmb-' + variant_id).show()
  currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
  if not currentThumb.hasClass('vtmb-' + variant_id) and not currentThumb.hasClass('tmb-all')
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0))
    newImg = thumb.find('a').attr('href')
    ($ 'ul.thumbnails li').removeClass 'selected'
    thumb.addClass 'selected'
    ($ '#main-image img').attr 'src', newImg
    ($ '#main-image').data 'selectedThumb', newImg
    ($ '#main-image').data 'selectedThumbId', thumb.attr('id')
```

with this

```coffeescript
show_variant_images = (variant_id) ->
  ($ 'li.vtmb').hide()
  ($ 'li.vtmb-' + variant_id).show()
  currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
  if not currentThumb.hasClass('vtmb-' + variant_id)
    thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
    newImg = thumb.find('a').attr('href')
    ($ 'ul.thumbnails li').removeClass 'selected'
    thumb.addClass 'selected'
    ($ '#main-image img').attr 'src', newImg
    ($ '#main-image').data 'selectedThumb', newImg
    ($ '#main-image').data 'selectedThumbId', thumb.attr('id')
```

The pieces to notice are the removal of:

```coffeescript
 and not currentThumb.hasClass('tmb-all')
```

and the addition/modification of:
```coffeescript
    thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
```

Additionally, the current code for the method __add_image_handlers__ in the same file causes twitter bootstrap thumbnail support to stop working.

I recognize that twitter bootstrap isn't part of the core Spree code, but a small change to this file allows them to play together without a problem.

The current __add_image_handlers__ method that looks like this:

```coffeescript
add_image_handlers = ->
  ($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
  ($ 'ul.thumbnails li').eq(0).addClass 'selected'
  ($ 'ul.thumbnails a').on 'click', (event) ->
    ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
    ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
    ($ this).mouseout ->
      ($ 'ul.thumbnails li').removeClass 'selected'
      ($ event.currentTarget).parent('li').addClass 'selected'
    false

  ($ 'ul.thumbnails li').on 'mouseenter', (event) ->
    ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

  ($ 'ul.thumbnails li').on 'mouseleave', (event) ->
    ($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')
```

Should be changed to this:
```coffeescript
add_image_handlers = ->
  ($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
  ($ '#product-thumbnails li').eq(0).addClass 'selected'
  ($ '#product-thumbnails a').on 'click', (event) ->
    ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
    ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
    ($ this).mouseout ->
      ($ '#product-thumbnails li').removeClass 'selected'
      ($ event.currentTarget).parent('li').addClass 'selected'
    false

  ($ '#product-thumbnails li').on 'mouseenter', (event) ->
    ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

  ($ '#product-thumbnails li').on 'mouseleave', (event) ->
    ($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')
```

Basically every instance of:

```
ul.thumbnails
```

has been replaced with:

```
#product-thumbnails
```

The aforementioned ul.thumbnails targets __EVERY__ ul that has a thumbnail class on __ANY__ page that has the products.js included (which means every page since it gets compiled into all.js).  Since the __mouseenter__, __mouseleave__, and __click__ handlers are all overridden here, the twitter bootstrap handlers for thumbnails gets clobbered.


I would appreciate if the __add_image_handlers__ method was fixed in the Spree core so that we play nicer with other javascript.


Thanks,
Chris