48 files changed, 2133 insertions, 1247 deletions
diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index 2bbfcce4512..6157be3fbe1 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -39,7 +39,7 @@
             <field name="model_id" ref="mass_mailing.model_mail_mass_mailing_contact"/>
             <field name="use_default_to" eval="True"/>
             <field name="auto_delete" eval="True"/>
-            <field name="body_html"><![CDATA[<div data-snippet-id="big-picture" style="padding:0px; margin:0px">
+            <field name="body_html"><![CDATA[<div style="padding:0px; margin:0px">
 <table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
     <tbody>
         <tr>
@@ -64,7 +64,7 @@
     </tbody>
 </table>
 </div>
-<div data-snippet-id="three-columns" style="padding:0px; margin:0px">
+<div style="padding:0px; margin:0px">
 <table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
     <tbody>
         <tr>
@@ -108,7 +108,7 @@
             <field name="mailing_domain">[('customer', '=', True)]</field>
             <field name="reply_to_mode">email</field>
             <field name="reply_to"><![CDATA[Info <info@yourcompany.example.com>]]></field>
-            <field name="body_html"><![CDATA[<div data-snippet-id="big-picture" style="padding:0px; margin:0px">
+            <field name="body_html"><![CDATA[<div style="padding:0px; margin:0px">
 <table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
     <tbody>
         <tr>
@@ -133,7 +133,7 @@
     </tbody>
 </table>
 </div>
-<div data-snippet-id="three-columns" style="padding:0px; margin:0px">
+<div style="padding:0px; margin:0px">
 <table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
     <tbody>
         <tr>
diff --git a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
index 4caba1d29b5..0a460caaa81 100644
--- a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ b/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -5,8 +5,9 @@
     var _t = openerp._t;
 
     website.snippet.options.mailing_list_subscribe = website.snippet.Option.extend({
-        on_prompt: function () {
+        choose_mailing_list: function (type, value) {
             var self = this;
+            if (type !== "click") return;
             return website.prompt({
                 id: "editor_new_mailing_list_subscribe_button",
                 window_title: _t("Add a Newsletter Subscribe Button"),
@@ -22,15 +23,10 @@
         drop_and_build_snippet: function() {
             var self = this;
             this._super();
-            this.on_prompt().fail(function () {
+            this.choose_mailing_list('click').fail(function () {
                 self.editor.on_remove();
             });
         },
-        start : function () {
-            var self = this;
-            this.$el.find(".js_mailing_list").on("click", _.bind(this.on_prompt, this));
-            this._super();
-        },
         clean_for_save: function () {
             this.$target.addClass("hidden");
         },
diff --git a/addons/mass_mailing/views/snippets.xml b/addons/mass_mailing/views/snippets.xml
index e05e680206f..8641ebf6be0 100644
--- a/addons/mass_mailing/views/snippets.xml
+++ b/addons/mass_mailing/views/snippets.xml
@@ -29,13 +29,10 @@
     </xpath>
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-snippet-option-id='mailing_list_subscribe'
+        <div data-option='mailing_list_subscribe'
             data-selector=".js_subscribe"
-            data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
-           >
-            <li>
-                <a href="#" class="button js_mailing_list">Change Newsletter</a>
-            </li>
+            data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel">
+            <li data-choose_mailing_list=""><a>Change Newsletter</a></li>
         </div>
     </xpath>
 
diff --git a/addons/theme_bootswatch/__openerp__.py b/addons/theme_bootswatch/__openerp__.py
index 6af402c307a..5d051136dd3 100644
--- a/addons/theme_bootswatch/__openerp__.py
+++ b/addons/theme_bootswatch/__openerp__.py
@@ -1,12 +1,11 @@
 {
     'name': 'Bootswatch Theme',
     'description': 'Bootswatch Theme',
-    'category': 'Website',
+    'category': 'Theme',
     'version': '1.0',
     'author': 'OpenERP SA',
     'depends': ['website'],
     'data': [
-        'views/layout.xml',
         'views/theme.xml',
     ],
     'application': True,
diff --git a/addons/theme_bootswatch/static/src/xml/theme.xml b/addons/theme_bootswatch/static/src/xml/theme.xml
deleted file mode 100644
index 0eff6acc4df..00000000000
--- a/addons/theme_bootswatch/static/src/xml/theme.xml
+++ /dev/null
@@ -1,107 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates id="template" xml:space="preserve">
-
-<t t-extend="website.theme_customize">
-    <t t-jquery="#theme_customize_modal" t-operation="replace">
-        
-      <div id="theme_customize_modal" class="modal fade bs-example-modal-sm">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="loading_backdrop"></div>
-            <div class="modal-header">
-              <button type="button" class="close">×</button>
-              <h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
-            </div>
-            <div class="modal-body">
-              <table>
-                <tr>
-                  <td>
-                    <label class="checked">
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
-                      <input name="theme" type="radio" data-xmlid="" checked="checked"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/amelia/thumbnail.png" alt="Amelia"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_amelia"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cerulean/thumbnail.png" alt="Cerulean"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_cerulean"/>
-                    </label>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cosmo/thumbnail.png" alt="Cosmo"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_cosmo" data-disable="ee"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cyborg/thumbnail.png" alt="Cyborg"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_cyborg"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/flatly/thumbnail.png" alt="Flatly"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_flatly"/>
-                    </label>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/journal/thumbnail.png" alt="Journal"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_journal"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/readable/thumbnail.png" alt="Readable"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_readable"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/simplex/thumbnail.png" alt="Simplex"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_simplex"/>
-                    </label>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/slate/thumbnail.png" alt="Slate"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_slate"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/spacelab/thumbnail.png" alt="Spacelab"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_spacelab"/>
-                    </label>
-                  </td>
-                  <td>
-                    <label>
-                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/united/thumbnail.png" alt="United"/>
-                      <input name="theme" type="radio" data-xmlid="website.theme_united"/>
-                    </label>
-                  </td>
-                </tr>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </t>
-</t>
-
-    
-</templates>
diff --git a/addons/theme_bootswatch/views/layout.xml b/addons/theme_bootswatch/views/layout.xml
deleted file mode 100644
index 2f5cd624c16..00000000000
--- a/addons/theme_bootswatch/views/layout.xml
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-
-<template id="script" inherit_id="website.assets_editor" name="Clean scripts">
-    <xpath expr="/t" position="inside">
-        <script type="text/javascript">
-            (function() {
-                'use strict';
-                openerp.website.add_template_file('/theme_bootswatch/static/src/xml/theme.xml');
-            })();
-        </script>
-    </xpath>
-</template>
-
-</data>
-</openerp>
diff --git a/addons/theme_bootswatch/views/theme.xml b/addons/theme_bootswatch/views/theme.xml
index 2cb5fda3612..9b9964cc551 100644
--- a/addons/theme_bootswatch/views/theme.xml
+++ b/addons/theme_bootswatch/views/theme.xml
@@ -2,6 +2,108 @@
 <openerp>
 <data>
 
+<template id="theme_customize" inherit_id="website.theme_customize" name="theme_customize Bootswatch">
+    <xpath expr="div" position="replace">
+
+      <div id="theme_customize_modal" class="modal fade bs-example-modal-sm">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="loading_backdrop"></div>
+            <div class="modal-header">
+              <button type="button" class="close">×</button>
+              <h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
+            </div>
+            <div class="modal-body">
+              <table>
+                <tr>
+                  <td>
+                    <label class="checked">
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
+                      <input name="theme" type="radio" data-xmlid="" checked="checked"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/amelia/thumbnail.png" alt="Amelia"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_amelia"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cerulean/thumbnail.png" alt="Cerulean"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_cerulean"/>
+                    </label>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cosmo/thumbnail.png" alt="Cosmo"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_cosmo" data-disable="ee"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cyborg/thumbnail.png" alt="Cyborg"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_cyborg"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/flatly/thumbnail.png" alt="Flatly"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_flatly"/>
+                    </label>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/journal/thumbnail.png" alt="Journal"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_journal"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/readable/thumbnail.png" alt="Readable"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_readable"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/simplex/thumbnail.png" alt="Simplex"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_simplex"/>
+                    </label>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/slate/thumbnail.png" alt="Slate"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_slate"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/spacelab/thumbnail.png" alt="Spacelab"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_spacelab"/>
+                    </label>
+                  </td>
+                  <td>
+                    <label>
+                      <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/united/thumbnail.png" alt="United"/>
+                      <input name="theme" type="radio" data-xmlid="website.theme_united"/>
+                    </label>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </xpath>
+</template>
+
 <!--
      Apply Bootstrap less files
 -->
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 5b29ff743fe..d2666ab8ab8 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -273,46 +273,51 @@ class Website(openerp.addons.web.controllers.main.Home):
 
     @http.route('/website/attach', type='http', auth='user', methods=['POST'], website=True)
     def attach(self, func, upload=None, url=None):
-        Attachments = request.registry['ir.attachment']
-
-        website_url = message = None
-        if not upload:
-            website_url = url
-            name = url.split("/").pop()
+        # the upload argument doesn't allow us to access the files if more than
+        # one file is uploaded, as upload references the first file
+        # therefore we have to recover the files from the request object
+        Attachments = request.registry['ir.attachment']  # registry for the attachment table
+
+        uploads = []
+        message = None
+        if not upload: # no image provided, storing the link and the image name
+            uploads.append({'website_url': url})
+            name = url.split("/").pop()                       # recover filename
             attachment_id = Attachments.create(request.cr, request.uid, {
                 'name':name,
                 'type': 'url',
                 'url': url,
                 'res_model': 'ir.ui.view',
             }, request.context)
-        else:
+        else:                                                  # images provided
             try:
-                image_data = upload.read()
-                image = Image.open(cStringIO.StringIO(image_data))
-                w, h = image.size
-                if w*h > 42e6: # Nokia Lumia 1020 photo resolution
-                    raise ValueError(
-                        u"Image size excessive, uploaded images must be smaller "
-                        u"than 42 million pixel")
-
-                attachment_id = Attachments.create(request.cr, request.uid, {
-                    'name': upload.filename,
-                    'datas': image_data.encode('base64'),
-                    'datas_fname': upload.filename,
-                    'res_model': 'ir.ui.view',
-                }, request.context)
-
-                [attachment] = Attachments.read(
-                    request.cr, request.uid, [attachment_id], ['website_url'],
-                    context=request.context)
-                website_url = attachment['website_url']
+                for c_file in request.httprequest.files.getlist('upload'):
+                    image_data = c_file.read()
+                    image = Image.open(cStringIO.StringIO(image_data))
+                    w, h = image.size
+                    if w*h > 42e6: # Nokia Lumia 1020 photo resolution
+                        raise ValueError(
+                            u"Image size excessive, uploaded images must be smaller "
+                            u"than 42 million pixel")
+    
+                    attachment_id = Attachments.create(request.cr, request.uid, {
+                        'name': c_file.filename,
+                        'datas': image_data.encode('base64'),
+                        'datas_fname': c_file.filename,
+                        'res_model': 'ir.ui.view',
+                    }, request.context)
+    
+                    [attachment] = Attachments.read(
+                        request.cr, request.uid, [attachment_id], ['website_url'],
+                        context=request.context)
+                    uploads.append(attachment)
             except Exception, e:
                 logger.exception("Failed to upload image to attachment")
                 message = unicode(e)
 
         return """<script type='text/javascript'>
             window.parent['%s'](%s, %s);
-        </script>""" % (func, json.dumps(website_url), json.dumps(message))
+        </script>""" % (func, json.dumps(uploads), json.dumps(message))
 
     @http.route(['/website/publish'], type='json', auth="public", website=True)
     def publish(self, id, object):
diff --git a/addons/website/data/data.xml b/addons/website/data/data.xml
index c5254d65c0f..08ef965104c 100644
--- a/addons/website/data/data.xml
+++ b/addons/website/data/data.xml
@@ -52,6 +52,18 @@
             </field>
         </record>
 
+        <record id="action_module_theme" model="ir.actions.act_window">
+            <field name="name">Website Theme</field>
+            <field name="res_model">ir.module.module</field>
+            <field name="view_type">form</field>
+            <field name="view_mode">kanban,form</field>
+            <field name="context" eval="'{\'search_default_category_id\':'+str(ref('base.module_category_theme'))+'}'"/>
+            <field name="help" type="html">
+              <p><b>No theme module found!</b></p>
+              <p>You should try others search criteria.</p>
+            </field>
+        </record>
+
         <record id="action_website" model="ir.actions.act_url">
             <field name="name">Website</field>
             <field name="url">/</field>
diff --git a/addons/website/doc/website.snippet.rst b/addons/website/doc/website.snippet.rst
new file mode 100644
index 00000000000..9eec8431fcc
--- /dev/null
+++ b/addons/website/doc/website.snippet.rst
@@ -0,0 +1,134 @@
+Website Snippet & Blocks
+========================
+
+The building blocks appear in the edit bar website. These prebuilt html block
+allowing the designer to easily generate content on a page (drag and drop).
+Snippets bind javascript object on custom part html code according to their
+selector (jQuery) and javascript object. The snippets is also used to create
+the drop zone.
+
+
+Building Blocks
++++++++++++++++
+
+Overwrite ``_get_snippet_url`` to set an other file to load the snippets (use by 
+website_mail for example)
+Overwrite ``_add_check_selector`` to enable or disable other snippets. By default
+the builder check if the node or his parent have the attribute data-oe-model
+
+Trigger:
+- ``snippet-dropped`` is triggered on ``#oe_snippets`` whith $target as attribute when a snippet is dropped
+- ``snippet-activated`` is triggered on ``#oe_snippets`` (and on snippet) when a snippet is activated
+
+
+Blocks
+++++++
+
+The ``blocks`` are the HTML code that can be drop in the page. The blocks consist
+of a body and a thumbnail:
+ - thumbnail:
+   (have class ``oe_snippet_thumbnail``) contains a picture and a text used to
+   display a preview in the edit bar that contains all the block list
+ - body:
+   (have class ``oe_snippet_body``) is the real part dropped in the page. The class
+   ``oe_snippet_body`` is removed before inserting the block in the page.
+e.g.:
+    <div>
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="...image src..."/>
+            <span class="oe_snippet_thumbnail_title">...Block Name...</span>
+        </div>
+        <div class="oe_snippet_body">
+            <!-- 
+                The block with class 'oe_snippet_body' is inserted in the page.
+                This class is removed when the block is dropped.
+                The block can be made of any html tag and content. -->
+        </div>
+    </div>
+
+
+Editor
+++++++
+
+The ``editor`` is the frame placed above the block being edited who contains buttons
+(move, delete, clone) and customize menu. The ``editor`` load ``options`` based on
+selectors defined in snippets
+
+
+Options
++++++++
+
+The ``option`` is the javascript object used to customize the HTML code.
+
+Object:
+ - this.``$target``:
+   block html inserted inside the page
+ - this.``$el``:
+   html li list of this options
+ - this.``$overlay``:
+   html editor overlay who content resize bar, customize menu...
+
+Methods:
+ - ``set_active``:
+   highlight the customize menu item when the user click on customize, and click on
+   an item.
+ - ``start``:
+   called when the editor is created on the DOM
+ - ``on_focus``:
+   called when the user click inside the block inserted in page and when the
+   user drop on block into the page
+ - ``on_blur``:
+   called when the user click outside the block inserted in page, if the block
+   is focused
+ - ``on_clone``:
+   called when the snippet is duplicate
+   @variables: $clone is allready inserted is the page
+ - ``on_remove``:
+   called when the snippet is removed (dom is removing after this tigger)
+ - ``drop_and_build_snippet: 
+   called just after that a thumbnail is drag and dropped into a drop zone.
+   The content is already inserted in the page.
+ - ``clean_for_save``: 
+   is called just before to save the vue. Sometime it's important to remove or add
+   some datas (contentEditable, added classes to a running animation...)
+
+Customize Methods:
+All javascript option can defiend method call from the template on mouse over, on
+click or to reset the default value (<li data-your_js_method="your_value"><a>...</a></li>).
+The method receive the variable type (``over``, ``click`` or ``reset``), the method
+value and the jQuery object of the HTML li item. (can be use for multi methods)
+
+By default to custom method are defined:
+
+ - ``check_class(type, className, $li)``:
+   li must have data-check_class="a_classname_for_test" to call this method. This method
+   toggle the className on $target
+ - ``select_class(type, className, $li)``:
+   This method remove all other select_class value (for this option) and add this current ClassName
+
+
+Snippet
++++++++
+
+The ``snippets`` are the HTML code to defined the drop zone and the linked javascript object.
+All HTML li tag defined inside the snippets HTML are insert into the customize menu. All 
+data attributes is optional:
+
+- ``data-selector``:
+  Apply options on all The part of html who match with this jQuery selector.
+  E.g.: If the selector is div, all div will be selected and can be highlighted and assigned an editor.
+- ``data-option``:
+  javascript ``option`` to call when the ``editor`` is loaded
+- ``data-drop-in``:
+  The html part can be insert or move beside the selected html block (jQuery selector)
+- ``data-drop-near``:
+  The html part can be insert or move inside the selected html block (jQuery selector)
+- ``data-drop-in-vertical``:
+  The html part can be insert or move inside the selected html block. The drop zone is displayed
+  vertically (jQuery selector)
+- HTML content like <li data-your_js_method="your_value"><a>...</a></li>:
+  List of HTML li menu items displayed in customize menu. If the li tag have datas the methods are
+  automatically called
+- ``no-check``:
+  The selectors are automatically compute to have elements inside the branding. If you use this option
+  the check is not apply (for e.g.: to have a snippet for the grid view of website_sale)
+\ No newline at end of file
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index a1c42b0b814..ebe87769794 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -46,6 +46,7 @@
   display: inline-block;
   white-space: nowrap;
   background: black;
+  margin-right: 60px;
 }
 #oe_snippets .tab-content > div {
   background: black;
@@ -119,6 +120,12 @@
 .oe_snippet > :not(.oe_snippet_thumbnail) {
   display: none !important;
 }
+.oe_snippet.disable .oe_snippet_thumbnail {
+  background-color: rgba(255, 0, 0, 0.75);
+}
+.oe_snippet.disable .oe_snippet_thumbnail_img {
+  opacity: 0.8;
+}
 
 #oe_snippets .oe_snippet_thumbnail {
   background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4)));
@@ -381,6 +388,9 @@
   float: none;
   margin: 0 -3px;
 }
+.oe_overlay .oe_overlay_options > .btn-group > div {
+  float: none;
+}
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
   cursor: pointer;
 }
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 71613f8dfbe..a94b8665e0c 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -43,6 +43,7 @@
         display: inline-block
         white-space: nowrap
         background: black
+        margin-right: 60px
         > div
             background: rgb(0,0,0)
             label
@@ -87,7 +88,11 @@
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
         display: none !important
-
+    &.disable
+        .oe_snippet_thumbnail
+            background-color: rgba(255, 0, 0, 0.75)
+        .oe_snippet_thumbnail_img
+            opacity: 0.8
 #oe_snippets .oe_snippet_thumbnail
     @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
 
@@ -286,6 +291,8 @@
                 display: inline-block
                 float: none
                 margin: 0 -3px
+            > div
+                float: none
         .btn, a
             cursor: pointer
         .dropdown
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index c5d403bfdda..055ac7fb4e3 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -356,6 +356,114 @@ ul.nav-stacked > li > a {
   padding: 4px 0;
 }
 
+/* gallery */
+.o_gallery.o_grid.o_spc-none div.row, .o_gallery.o_masonry.o_spc-none div.row {
+  margin: 0;
+}
+.o_gallery.o_grid.o_spc-none div.row > *, .o_gallery.o_masonry.o_spc-none div.row > * {
+  padding: 0;
+}
+.o_gallery.o_grid.o_spc-small div.row, .o_gallery.o_masonry.o_spc-small div.row {
+  margin: 5px 0;
+}
+.o_gallery.o_grid.o_spc-small div.row > *, .o_gallery.o_masonry.o_spc-small div.row > * {
+  padding: 0 5px;
+}
+.o_gallery.o_grid.o_spc-medium div.row, .o_gallery.o_masonry.o_spc-medium div.row {
+  margin: 10px 0;
+}
+.o_gallery.o_grid.o_spc-medium div.row > *, .o_gallery.o_masonry.o_spc-medium div.row > * {
+  padding: 0 10px;
+}
+.o_gallery.o_grid.o_spc-big div.row, .o_gallery.o_masonry.o_spc-big div.row {
+  margin: 15px 0;
+}
+.o_gallery.o_grid.o_spc-big div.row > *, .o_gallery.o_masonry.o_spc-big div.row > * {
+  padding: 0 15px;
+}
+.o_gallery.o_grid .img, .o_gallery.o_masonry .img {
+  width: 100%;
+}
+.o_gallery.o_grid.size-auto .row {
+  height: auto;
+}
+.o_gallery.o_grid.size-small .row {
+  height: 100px;
+}
+.o_gallery.o_grid.size-medium .row {
+  height: 250px;
+}
+.o_gallery.o_grid.size-big .row {
+  height: 400px;
+}
+.o_gallery.o_grid.size-small .img, .o_gallery.o_grid.size-medium .img, .o_gallery.o_grid.size-big .img {
+  height: 100%;
+}
+.o_gallery.o_nomode.o_spc-none .img {
+  padding: 0;
+}
+.o_gallery.o_nomode.o_spc-small .img {
+  padding: 5px;
+}
+.o_gallery.o_nomode.o_spc-medium .img {
+  padding: 10px;
+}
+.o_gallery.o_nomode.o_spc-big .img {
+  padding: 15px;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li {
+  border: 1px solid #aaaaaa;
+}
+.o_gallery .carousel-inner .item img {
+  max-width: none;
+}
+
+.o_gallery.o_slideshow > .container {
+  height: 100%;
+}
+
+.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel {
+  height: 100%;
+}
+.o_gallery.o_slideshow .carousel img, .modal-body.o_slideshow .carousel img {
+  max-height: 100%;
+  max-width: 100%;
+  margin: auto;
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators, .modal-body.o_slideshow .carousel ul.carousel-indicators {
+  display: block;
+  height: auto;
+  padding: 0;
+  border-width: 0;
+  position: absolute;
+  bottom: 0;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li, .modal-body.o_slideshow .carousel ul.carousel-indicators li {
+  list-style-image: none;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  margin: 0 0px 5px 5px;
+  padding: 0;
+  border: 1px solid #aaaaaa;
+  text-indent: initial;
+  background-size: cover;
+  opacity: 0.5;
+  background-color: black;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li.active, .modal-body.o_slideshow .carousel ul.carousel-indicators li.active {
+  opacity: 1;
+}
+.o_gallery.o_slideshow .carousel .carousel-control.left, .o_gallery.o_slideshow .carousel .carousel-control.right, .modal-body.o_slideshow .carousel .carousel-control.left, .modal-body.o_slideshow .carousel .carousel-control.right {
+  background-image: none;
+  background-color: transparent;
+}
+
 /* Parallax Theme */
 div.carousel .carousel-indicators li {
   border: 1px solid grey;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index f4cf73437f8..ba47a12c90f 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -285,6 +285,102 @@ ul.nav-stacked > li > a
 .hr
     padding: 4px 0
 
+/* gallery */
+
+.o_gallery
+    &.o_grid, &.o_masonry
+        &.o_spc-none
+            div.row
+                margin: 0
+            div.row > *
+                padding: 0
+        &.o_spc-small
+            div.row
+                margin: 5px 0
+            div.row > *
+                padding: 0 5px
+        &.o_spc-medium
+            div.row
+                margin: 10px 0
+            div.row > *
+                padding: 0 10px
+        &.o_spc-big
+            div.row
+                margin: 15px 0
+            div.row > *
+                padding: 0 15px
+        .img
+            width: 100%
+    &.o_grid
+        &.size-auto .row
+            height: auto
+        &.size-small .row
+            height: 100px
+        &.size-medium .row
+            height: 250px
+        &.size-big .row
+            height: 400px
+        &.size-small, &.size-medium, &.size-big
+            .img
+                height: 100%
+    &.o_nomode
+        &.o_spc-none
+            .img
+                padding: 0
+        &.o_spc-small
+            .img
+                padding: 5px
+        &.o_spc-medium
+            .img
+                padding: 10px
+        &.o_spc-big
+            .img
+                padding: 15px
+
+    &.o_slideshow .carousel ul.carousel-indicators li
+        border: 1px solid #aaa
+    .carousel-inner .item img
+        max-width: none
+
+.o_gallery.o_slideshow > .container
+    height: 100%
+
+.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel
+    height: 100%
+    img
+        max-height: 100%
+        max-width: 100%
+        margin: auto
+        position: relative
+        top: 50%
+        -webkit-transform: translateY(-50%)
+        -ms-transform: translateY(-50%)
+        transform: translateY(-50%)
+    ul.carousel-indicators
+        display: block
+        height: auto
+        padding: 0
+        border-width: 0
+        position: absolute
+        bottom: 0
+        li
+            list-style-image: none
+            display: inline-block
+            width: 35px
+            height: 35px
+            margin: 0 0px 5px 5px
+            padding: 0
+            border: 1px solid #aaa
+            text-indent: initial
+            background-size: cover
+            opacity: 0.5
+            background-color: #000
+        li.active
+            opacity: 1
+    .carousel-control.left, .carousel-control.right
+        background-image: none
+        background-color: transparent
+
 /* Parallax Theme */
 
 div.carousel
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 9b86002626c..205d8dde076 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -1568,9 +1568,9 @@
             }
             var callback = _.uniqueId('func_');
             this.$('input[name=func]').val(callback);
-            window[callback] = function (url, error) {
+            window[callback] = function (attachments, error) {
                 delete window[callback];
-                self.file_selected(url, error);
+                self.file_selected(attachments[0]['website_url'], error);
             };
         },
         file_selection: function () {
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index c72e2c3b84e..785027795ce 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -1,7 +1,9 @@
 (function () {
     'use strict';
 
+
     var website = openerp.website;
+
     if (!website.snippet) website.snippet = {};
     website.snippet.readyAnimation = [];
 
@@ -37,7 +39,14 @@
             }
         });
     };
+
+
     $(document).ready(function () {
+        if ($(".o_gallery:not(.oe_slideshow)").size()) {
+            // load gallery modal template
+            website.add_template_file('/website/static/src/xml/website.gallery.xml');
+        }
+
         website.snippet.start_animation();
     });
 
@@ -69,7 +78,7 @@
     website.snippet.animationRegistry.slider = website.snippet.Animation.extend({
         selector: ".carousel",
         start: function () {
-            this.$target.carousel({interval: 10000});
+            this.$target.carousel();
         },
         stop: function () {
             this.$target.carousel('pause');
@@ -154,4 +163,70 @@
             this.$target.html('<div class="css_editable_mode_display">&nbsp;</div><iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
         },
     });
+    
+    /* -------------------------------------------------------------------------
+    Gallery Animation  
+
+    This ads a Modal window containing a slider when an image is clicked 
+    inside a gallery 
+   -------------------------------------------------------------------------*/
+    website.snippet.animationRegistry.gallery = website.snippet.Animation.extend({
+        selector: ".o_gallery:not(.o_slideshow)",
+        start: function() {
+            var self = this;
+            this.$el.on("click", "img", this.click_handler);
+        },
+        click_handler : function(event) {
+            var self = this;
+            var $cur = $(event.currentTarget);
+            var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
+            
+            // show it only if not in edition mode
+            if (!edition_mode) {
+                var urls = [],
+                    idx = undefined,
+                    milliseconds = undefined,
+                    params = undefined,
+                    $images = $cur.closest(".o_gallery").find("img"),
+                    dimensions = {
+                        min_width  : Math.round( window.innerWidth  *  0.7),
+                        min_height : Math.round( window.innerHeight *  0.7),
+                        max_width  : Math.round( window.innerWidth  *  0.7),
+                        max_height : Math.round( window.innerHeight *  0.7),
+                        height : Math.round( window.innerHeight *  0.7)
+                };
+
+                $images.each(function() {
+                    urls.push($(this).attr("src"));
+                });
+                var $img = ($cur.is("img") === true) ? $cur : $cur.closest("img");
+                idx = urls.indexOf($img.attr("src"));
+
+                milliseconds = $cur.closest(".o_gallery").data("interval") || false;
+                var params = {
+                    srcs : urls,
+                    index: idx,
+                    dim  : dimensions,
+                    interval : milliseconds,
+                    id: _.uniqueId("slideshow_")
+                };
+                var $modal = $(openerp.qweb.render('website.gallery.slideshow.lightbox', params));
+                $modal.modal({
+                    keyboard : true,
+                    backdrop : true
+                });
+                $modal.on('hidden.bs.modal', function() {
+                    $(this).hide();
+                    $(this).siblings().filter(".modal-backdrop").remove(); // bootstrap leaves a modal-backdrop
+                    $(this).remove();
+
+                });
+                $modal.find(".modal-content, .modal-body.o_slideshow").css("height", "100%");
+
+                $modal.appendTo(document.body);
+                $modal.find(".carousel").carousel();
+            }
+        } // click_handler  
+    });
+
 })();
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 4630206748f..c4ca26f2f74 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1,135 +1,6 @@
 (function () {
     'use strict';
 
-/*  Building block / Snippet Editor
- 
-    The building blocks appear in the edit bar website. These prebuilt html block
-    allowing the designer to easily generate content on a page (drag and drop).
-    Options allow snippets to add customizations part html code according to their
-    selector (jQuery) and javascript object.
-    
-    How to create content?
-
-    Designers can add their own html block in the "snippets" (/website/views/snippets.xml).
-    The block must be added in one of four menus (structure, content, feature or effect).
-    Structure:
-        <div>
-            <div class="oe_snippet_thumbnail">
-                <img class="oe_snippet_thumbnail_img" src="...image src..."/>
-                <span class="oe_snippet_thumbnail_title">...Block Name...</span>
-            </div>
-            <div class="oe_snippet_body">
-                ...
-                <!-- 
-                    The block with class 'oe_snippet_body' is inserted in the page.
-                    This class is removed when the block is dropped.
-                    The block can be made of any html tag and content. -->
-            </div>
-        </div>
-
-    How to create options?
-
-    Designers can add their own html block in the "snippet_options" (/website/views/snippets.xml).
-    Structure:
-
-        <div data-snippet-option-id='...'           <!-- Required: javascript object id (but javascript
-                                                        for this option object is not required) -->
-            data-selector="..."                     <!-- Required: jQuery selector.
-                                                        Apply options on all The part of html who 
-                                                        match with this jQuery selector.
-                                                        E.g.: If the selector is div, all div will be selected
-                                                        and can be highlighted and assigned an editor.  -->
-            data-selector-siblings="..."            <!-- Optional: jQuery selector.
-                                                        The html part can be insert or move beside
-                                                        the selected html block -->
-            data-selector-children="..."            <!-- Optional: jQuery selector.
-                                                        The html part can be insert or move inside
-                                                        the selected html block -->
-            data-selector-vertical-children='...'>  <!-- Optional: jQuery selector.
-                                                        The html part can be insert or move inside
-                                                        the selected html block. The drop zone is
-                                                        displayed vertically -->
-                ...
-                <li><a href="#">...</a></li>        <!-- Optional: html li list.
-                                                        List of menu items displayed in customize
-                                                        menu. If the li tag have 'data-class', the
-                                                        class is automaticcally added or removed to
-                                                        the html content when the user select this item. -->
-                ...
-                <li class="dropdown-submenu"                <!-- Optional: html li list exemple. !-->
-                    data-required="true">                   <!-- Optional: if only one item can be selected
-                                                                and can't be unselect. !-->
-                    <a tabindex="-1" href="#">...</a>       <!-- bootstrap dropdown button !-->
-                    <ul class="dropdown-menu">
-                        <li data-value="text_only"><a>...</a></li>      <!-- by default data-value is apply
-                                                                            like a class to html block !-->
-                    </ul>
-                </li>
-        </div>
-
-        How to create a javascript object for an options?
-
-        openerp.website.snippet.options["...option-id..."] = website.snippet.Option.extend({
-            // start is called when the user click into a block or when the user drop a block 
-            // into the page (just after the init method).
-            // start is usually used to bind event.
-            //
-            // this.$target: block html inserted inside the page
-            // this.$el: html li list of this options
-            // this.$overlay: html editor overlay who content resize bar, customize menu...
-            start: function () {},
-
-
-            // onFocus is called when the user click inside the block inserted in page
-            // and when the user drop on block into the page
-            onFocus : function () {},
-
-
-            // onBlur is called when the user click outside the block inserted in page, if
-            // the block is focused
-            onBlur : function () {},
-
-
-            // on_clone is called when the snippet is duplicate
-            // @variables: $clone is allready inserted is the page
-            on_clone: function ($clone) {},
-
-
-            // on_remove is called when the snippet is removed (dom is removing after this tigger)
-            on_remove: function () {},
-
-
-            // drop_and_build_snippet is called just after that a thumbnail is drag and dropped
-            // into a drop zone. The content is already inserted in the page.
-            drop_and_build_snippet: function () {},
-
-            // select is called when a user select an item in the li list of options
-            // By default, if the li item have a data-value attribute, the data-vlue it's apply
-            // like a class to the html block (this.$target)
-            // @variables: next_previous = {$next, $prev}
-            //      $next = next item selected or false
-            //      $prev = previous item selected or false
-            select: function (event, next_previous) {}
-
-            // preview is called when a user is on mouse over or mouse out of an item
-            // variables: next_previous = {$next, $prev}
-            //      $next = next item selected or false
-            //      $prev = previous item selected or false
-            preview: function (event, next_previous) {}
-
-            // clean_for_save
-            // clean_for_save is called just before to save the vue
-            // Sometime it's important to remove or add some datas (contentEditable, added 
-            // classes to a running animation...)
-            clean_for_save: function () {}
-        });
-
-
-    // 'snippet-dropped' is triggered on '#oe_snippets' whith $target as attribute when a snippet is dropped
-    // 'snippet-activated' is triggered on '#oe_snippets' (and on snippet) when a snippet is activated
-
-*/
-
     var dummy = function () {};
 
     var website = openerp.website;
@@ -177,8 +48,25 @@
         }
     });
 
+    $.extend($.expr[':'],{
+        checkData: function(node,i,m){
+            var dataName = m[3];
+            while (node) {
+                if (node.dataset && node.dataset[dataName]) {
+                    return true;
+                } else {
+                    node = node.parentNode;
+                }
+            }
+            return false;
+        },
+        hasData: function(node,i,m){
+            return !!_.toArray(node.dataset).length;
+        },
+    });
+
     if (!website.snippet) website.snippet = {};
-    website.snippet.templateOptions = {};
+    website.snippet.templateOptions = [];
     website.snippet.globalSelector = "";
     website.snippet.selector = [];
     website.snippet.BuildingBlock = openerp.Widget.extend({
@@ -198,25 +86,6 @@
                 subtree: true,
             });
         },
-        dom_filter: function (dom, sibling) {
-            if (typeof dom === "string") {
-                var include = "[data-oe-model]";
-                var sdom = dom.split(',');
-                dom = "";
-                _.each(sdom, function (val) {
-                    val = val.replace(/^\s+|\s+$/g, '');
-                    dom += include + " " + val + ", ";
-                    if (!sibling) {
-                        val = val.split(" ");
-                        dom += val.shift() + include + val.join(" ") + ", ";
-                    }
-                });
-                dom = dom.replace(/,\s*$/g, '');
-                return $(dom);
-            } else {
-                return (!sibling && $(dom).is("[data-oe-model]")) || $(dom).parents("[data-oe-model]").length ? $(dom) : $("");
-            }
-        },
         start: function() {
             var self = this;
 
@@ -224,18 +93,16 @@
                 .prependTo(this.parent.$("#website-top-edit ul"))
                 .find("button");
 
-            this.$button.click(function () {
-                self.make_active(false);
-                self.$el.toggleClass("hidden");
-            });
-            $("#wrapwrap").click(function () {
+            this.$button.click(_.bind(this.show_blocks, this));
+
+            this.$snippet = $("#oe_snippets");
+            this.$wrapwrap = $("#wrapwrap");
+            this.$wrapwrap.click(function () {
                 self.$el.addClass("hidden");
             });
 
             this.fetch_snippet_templates();
-
             this.bind_snippet_click_editor();
-
             this.$el.addClass("hidden");
 
             $(document).on('click', '.dropdown-submenu a[tabindex]', function (e) {
@@ -245,11 +112,69 @@
             this.getParent().on('change:height', this, function (editor) {
                 self.$el.css('top', editor.get('height'));
             });
-            self.$el.css('top', this.parent.get('height'));
+            this.$el.css('top', this.parent.get('height'));
+        },
+        show_blocks: function () {
+            var self = this;
+            this.make_active(false);
+            this.$el.toggleClass("hidden");
+            if (this.$el.hasClass("hidden")) {
+                return;
+            }
+
+            //this.enable_snippets( this.$snippet.find(".tab-pane.active") );
+            var categories = this.$snippet.find(".tab-pane.active")
+                .add(this.$snippet.find(".tab-pane:not(.active)"))
+                .get().reverse();
+            function enable() {
+                self.enable_snippets( $(categories.pop()) );
+                if (categories.length) {
+                    setTimeout(enable,10);
+                }
+            }
+            setTimeout(enable,0);
+        },
+        enable_snippets: function ($category) {
+            var self = this;
+            $category.find(".oe_snippet_body").each(function () {
+                var $snippet = $(this);
+
+                if (!$snippet.data('selectors')) {
+                    var selectors = [];
+                    for (var k in website.snippet.templateOptions) {
+                        var option = website.snippet.templateOptions[k];
+                        if ($snippet.is(option.base_selector)) {
+
+                            var dropzone = [];
+                            if (option['drop-near']) dropzone.push(option['drop-near']);
+                            if (option['drop-in']) dropzone.push(option['drop-in']);
+                            if (option['drop-in-vertical']) dropzone.push(option['drop-in-vertical']);
+                            selectors = selectors.concat(dropzone);
+                        }
+                    }
+                    $snippet.data('selectors', selectors.length ? selectors.join(":first, ") + ":first" : "");
+                }
+
+                if ($snippet.data('selectors').length && self.$wrapwrap.find($snippet.data('selectors')).size()) {
+                    $snippet.closest(".oe_snippet").removeClass("disable");
+                } else {
+                    $snippet.closest(".oe_snippet").addClass("disable");
+                }
+            });
+            $('#oe_snippets .scroll a[data-toggle="tab"][href="#' + $category.attr("id") + '"]')
+                .toggle(!!$category.find(".oe_snippet:not(.disable)").size());
         },
         _get_snippet_url: function () {
             return '/website/snippets';
         },
+        _add_check_selector : function (selector, no_check) {
+            var data = selector.split(",");
+            var selectors = [];
+            for (var k in data) {
+                selectors.push(data[k].replace(/^\s+|\s+$/g, '') + (no_check ? "" : ":checkData(oeModel)"));
+            }
+            return selectors.join(", ");
+        },
         fetch_snippet_templates: function () {
             var self = this;
 
@@ -258,34 +183,30 @@
                     var $html = $(html);
 
                     var selector = [];
-                    var $styles = $html.find("[data-snippet-option-id]");
+                    var $styles = $html.find("[data-option], [data-selector]");
                     $styles.each(function () {
                         var $style = $(this);
-                        var style_id = $style.data('snippet-option-id');
-                        website.snippet.templateOptions[style_id] = {
-                            'snippet-option-id' : style_id,
-                            'selector': $style.data('selector'),
+                        var no_check = $style.data('no-check');
+                        var option_id = $style.data('option');
+                        var option = {
+                            'option' : option_id,
+                            'base_selector': $style.data('selector'),
+                            'selector': self._add_check_selector($style.data('selector'), no_check),
                             '$el': $style,
-                            'selector-siblings': $style.data('selector-siblings'),
-                            'selector-children': $style.data('selector-children'),
-                            'selector-vertical-children': $style.data('selector-vertical-children'),
+                            'drop-near': $style.data('drop-near') && self._add_check_selector($style.data('drop-near'), no_check),
+                            'drop-in': $style.data('drop-in') && self._add_check_selector($style.data('drop-in'), no_check),
+                            'drop-in-vertical': $style.data('drop-in-vertical') && self._add_check_selector($style.data('drop-in-vertical'), no_check),
                             'data': $style.data()
                         };
-                        selector.push($style.data('selector'));
+                        website.snippet.templateOptions.push(option);
+                        selector.push(option.selector);
                     });
                     $styles.addClass("hidden");
                     website.snippet.globalSelector = selector.join(",");
 
                     self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
-                    self.$el.append($html);
 
-
-                    var snippets = 0;
-                    self.$snippets.each(function () {
-                        if (self.snippet_have_dropzone($(this)))
-                            snippets++;
-                    });
-                    if (!snippets) self.$button.css("display", "none");
+                    self.$el.append($html);
 
                     self.make_snippet_draggable(self.$snippets);
                 });
@@ -310,17 +231,10 @@
         hide: function () {
             this.$el.addClass("hidden");
         },
-
-        snippet_have_dropzone: function ($snippet) {
-            return (($snippet.data('selector-siblings') && this.dom_filter($snippet.data('selector-siblings')).size() > 0) ||
-                    ($snippet.data('selector-children') && this.dom_filter($snippet.data('selector-children')).size() > 0) ||
-                    ($snippet.data('selector-vertical-children') && this.dom_filter($snippet.data('selector-vertical-children')).size() > 0));
-        },
-
         bind_snippet_click_editor: function () {
             var self = this;
             var snipped_event_flag;
-            $("#wrapwrap").on('click', function (event) {
+            self.$wrapwrap.on('click', function (event) {
                 if (snipped_event_flag || !event.srcElement) {
                     return;
                 }
@@ -337,9 +251,6 @@
                     $target = $target.parents(website.snippet.globalSelector).first();
                 }
 
-                if (!self.dom_filter($target).length) {
-                    $target = false;
-                }
                 if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
                     return;
                 }
@@ -349,14 +260,14 @@
         snippet_blur: function ($snippet) {
             if ($snippet) {
                 if ($snippet.data("snippet-editor")) {
-                    $snippet.data("snippet-editor").onBlur();
+                    $snippet.data("snippet-editor").on_blur();
                 }
             }
         },
         snippet_focus: function ($snippet) {
             if ($snippet) {
                 if ($snippet.data("snippet-editor")) {
-                    $snippet.data("snippet-editor").onFocus();
+                    $snippet.data("snippet-editor").on_focus();
                 }
             }
         },
@@ -364,15 +275,15 @@
             var self = this;
             var options = website.snippet.options;
             var template = website.snippet.templateOptions;
-            for (var k in options) {
-                if (template[k] && options[k].prototype.clean_for_save !== dummy) {
-                    var $snippet = this.dom_filter(template[k].selector);
-                    $snippet.each(function () {
-                        new options[k](self, null, $(this), k).clean_for_save();
+            for (var k in template) {
+                var Option = options[template[k]['option']];
+                if (Option && Option.prototype.clean_for_save !== dummy) {
+                    self.$wrapwrap.find(template[k].selector).each(function () {
+                        new Option(self, null, $(this), k).clean_for_save();
                     });
                 }
             }
-            $("*[contentEditable], *[attributeEditable]")
+            self.$wrapwrap.find("*[contentEditable], *[attributeEditable]")
                 .removeAttr('contentEditable')
                 .removeAttr('attributeEditable');
         },
@@ -392,7 +303,7 @@
                 this.create_overlay(this.$active_snipped_id);
                 this.snippet_focus($snippet);
             }
-            $("#oe_snippets").trigger('snippet-activated', $snippet);
+            this.$snippet.trigger('snippet-activated', $snippet);
             if ($snippet) {
                 $snippet.trigger('snippet-activated', $snippet);
             }
@@ -406,15 +317,6 @@
             this.cover_target($snippet.data('overlay'), $snippet);
         },
 
-        path_eval: function(path){
-            var obj = window;
-            path = path.split('.');
-            do{
-                obj = obj[path.shift()];
-            }while(path.length && obj);
-            return obj;
-        },
-
         // activate drag and drop for the snippets in the snippet toolbar
         make_snippet_draggable: function($snippets){
             var self = this;
@@ -437,32 +339,32 @@
                 start: function(){
                     self.hide();
                     dropped = false;
-                    // snippet_selectors => to get selector-siblings, selector-children, selector-vertical-children
+                    // snippet_selectors => to get drop-near, drop-in, drop-in-vertical
                     $snippet = $(this);
-                    $toInsert = $snippet.find('.oe_snippet_body').clone();
-
+                    var $base_body = $snippet.find('.oe_snippet_body');
                     var selector = [];
                     var selector_siblings = [];
                     var selector_children = [];
                     var selector_vertical_children = [];
                     for (var k in website.snippet.templateOptions) {
-                        if ($toInsert.is(website.snippet.templateOptions[k].selector)) {
-                            selector.push(website.snippet.templateOptions[k].selector);
-                            if (website.snippet.templateOptions[k]['selector-siblings'])
-                                selector_siblings.push(website.snippet.templateOptions[k]['selector-siblings']);
-                            if (website.snippet.templateOptions[k]['selector-children'])
-                                selector_children.push(website.snippet.templateOptions[k]['selector-children']);
-                            if (website.snippet.templateOptions[k]['selector-vertical-children'])
-                                selector_vertical_children.push(website.snippet.templateOptions[k]['selector-vertical-children']);
+                        if ($base_body.is(website.snippet.templateOptions[k].base_selector)) {
+                            selector.push(website.snippet.templateOptions[k].base_selector);
+                            if (website.snippet.templateOptions[k]['drop-near'])
+                                selector_siblings.push(website.snippet.templateOptions[k]['drop-near']);
+                            if (website.snippet.templateOptions[k]['drop-in'])
+                                selector_children.push(website.snippet.templateOptions[k]['drop-in']);
+                            if (website.snippet.templateOptions[k]['drop-in-vertical'])
+                                selector_vertical_children.push(website.snippet.templateOptions[k]['drop-in-vertical']);
                         }
                     }
 
+                    $toInsert = $base_body.clone();
                     action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
 
                     if( action === 'insert'){
                         if (!selector_siblings.length && !selector_children.length && !selector_vertical_children.length) {
-                            console.debug($snippet.data("snippet-id") + " have oe_snippet_body class and have not for insert action"+
-                                "data-selector-siblings, data-selector-children or data-selector-vertical-children tag for mutate action");
+                            console.debug($snippet.find(".oe_snippet_thumbnail_title").text() + " have not insert action: "+
+                                "data-drop-near, data-drop-in or data-drop-in-vertical");
                             return;
                         }
                         self.activate_insertion_zones({
@@ -473,7 +375,7 @@
 
                     } else if( action === 'mutate' ){
                         if (!$snippet.data('selector')) {
-                            console.debug($snippet.data("snippet-id") + " have not oe_snippet_body class and have not data-selector tag");
+                            console.debug($snippet.data("option") + " have not oe_snippet_body class and have not data-selector tag");
                             return;
                         }
                         var $targets = self.activate_overlay_zones(selector_children.join(","));
@@ -504,38 +406,24 @@
                 stop: function(ev, ui){
                     $toInsert.removeClass('oe_snippet_body');
                     
-                    if (action === 'insert' && ! dropped && $('.oe_drop_zone') && ui.position.top > 3) {
-                        var el = $('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first();
+                    if (action === 'insert' && ! dropped && self.$wrapwrap.find('.oe_drop_zone') && ui.position.top > 3) {
+                        var el = self.$wrapwrap.find('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first();
                         if (el.length) {
                             el.after($toInsert);
                             dropped = true;
                         }
                     }
 
-                    $('.oe_drop_zone').droppable('destroy').remove();
+                    self.$wrapwrap.find('.oe_drop_zone').droppable('destroy').remove();
                     
                     if (dropped) {
                         var $target = false;
                         $target = $toInsert;
 
                         setTimeout(function () {
-                            $("#oe_snippets").trigger('snippet-dropped', $target);
+                            self.$snippet.trigger('snippet-dropped', $target);
 
                             website.snippet.start_animation(true, $target);
-                            // drop_and_build_snippet
-                            self.create_overlay($target);
-                            if ($target.data("snippet-editor")) {
-                                $target.data("snippet-editor").drop_and_build_snippet();
-                            }
-                            for (var k in website.snippet.templateOptions) {
-                                $target.find(website.snippet.templateOptions[k].selector).each(function () {
-                                    var $snippet = $(this);
-                                    self.create_overlay($snippet);
-                                    if ($snippet.data("snippet-editor")) {
-                                        $snippet.data("snippet-editor").drop_and_build_snippet();
-                                    }
-                                });
-                            }
 
                             // reset snippet for rte
                             $target.removeData("snippet-editor");
@@ -551,7 +439,22 @@
                                     $snippet.removeData("overlay");
                                 }
                             });
+                            // end
+
+                            // drop_and_build_snippet
                             self.create_overlay($target);
+                            if ($target.data("snippet-editor")) {
+                                $target.data("snippet-editor").drop_and_build_snippet();
+                            }
+                            for (var k in website.snippet.templateOptions) {
+                                $target.find(website.snippet.templateOptions[k].selector).each(function () {
+                                    var $snippet = $(this);
+                                    self.create_overlay($snippet);
+                                    if ($snippet.data("snippet-editor")) {
+                                        $snippet.data("snippet-editor").drop_and_build_snippet();
+                                    }
+                                });
+                            }
                             // end
 
                             self.make_active($target);
@@ -566,7 +469,7 @@
         // return the original snippet in the editor bar from a snippet id (string)
         get_snippet_from_id: function(id){
             return $('.oe_snippet').filter(function(){
-                    return $(this).data('snippet-id') === id;
+                    return $(this).data('option') === id;
                 }).first();
         },
 
@@ -584,7 +487,7 @@
             var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
 
             if(child_selector){
-                self.dom_filter(child_selector).each(function (){
+                self.$wrapwrap.find(child_selector).each(function (){
                     var $zone = $(this);
                     $zone.find('> *:not(.oe_drop_zone):visible').after(zone_template);
                     $zone.prepend(zone_template);
@@ -592,7 +495,7 @@
             }
 
             if(vertical_child_selector){
-                self.dom_filter(vertical_child_selector).each(function (){
+                self.$wrapwrap.find(vertical_child_selector).each(function (){
                     var $zone = $(this);
                     var $template = $(zone_template).addClass("oe_vertical");
                     var nb = 0;
@@ -623,7 +526,7 @@
             }
 
             if(sibling_selector){
-                self.dom_filter(sibling_selector, true).each(function (){
+                self.$wrapwrap.find(sibling_selector, true).each(function (){
                     var $zone = $(this);
                     if($zone.prev('.oe_drop_zone:visible').length === 0){
                         $zone.before(zone_template);
@@ -641,13 +544,13 @@
                 // count += $zones.length;
                 // $zones.remove();
 
-                $zones = $('.oe_drop_zone > .oe_drop_zone:not(.oe_vertical)').remove();   // no recursive zones
+                $zones = self.$wrapwrap.find('.oe_drop_zone > .oe_drop_zone:not(.oe_vertical)').remove();   // no recursive zones
                 count += $zones.length;
                 $zones.remove();
             } while (count > 0);
 
             // Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
-            var $zones = $('.oe_drop_zone:not(.oe_vertical)');
+            var $zones = self.$wrapwrap.find('.oe_drop_zone:not(.oe_vertical)');
             $zones.each(function (){
                 var zone = $(this);
                 var prev = zone.prev();
@@ -671,14 +574,9 @@
         // generate drop zones covering the elements selected by the selector
         // we generate overlay drop zones only to get an idea of where the snippet are, the drop
         activate_overlay_zones: function(selector){
-            var $targets = this.dom_filter(selector);
+            var $targets = typeof selector === "string" ? this.$wrapwrap.find(selector) : selector;
             var self = this;
 
-            if (typeof selector !== 'string' && !$targets.length) {
-                console.debug( "A good node must have a [data-oe-model] attribute or must have at least one parent with [data-oe-model] attribute.");
-                console.debug( "Wrong node(s): ", selector);
-            }
-
             function is_visible($el){
                 return     $el.css('display')    != 'none'
                         && $el.css('opacity')    != '0'
@@ -719,9 +617,14 @@
                     $target.on("DOMNodeInserted DOMNodeRemoved DOMSubtreeModified", function () {
                         self.cover_target($zone, $target);
                     });
-                    $('body').on("resize", function () {
-                        self.cover_target($zone, $target);
-                    });
+                    var resize = function () {
+                        if ($zone.parent().length) {
+                            self.cover_target($zone, $target);
+                        } else {
+                            $('body').off("resize", resize);
+                        }
+                    };
+                    $('body').on("resize", resize);
                 }
                 self.cover_target($target.data('overlay'), $target);
             });
@@ -733,97 +636,86 @@
     website.snippet.options = {};
     website.snippet.Option = openerp.Class.extend({
         // initialisation (don't overwrite)
-        init: function (BuildingBlock, editor, $target, snippet_id) {
+        init: function (BuildingBlock, editor, $target, option_id) {
             this.BuildingBlock = BuildingBlock;
             this.editor = editor;
             this.$target = $target;
+            var option = website.snippet.templateOptions[option_id];
             var styles = this.$target.data("snippet-option-ids") || {};
-            styles[snippet_id] = this;
+            styles[option_id] = this;
             this.$target.data("snippet-option-ids", styles);
             this.$overlay = this.$target.data('overlay');
-            this['snippet-option-id'] = snippet_id;
-            var $option = website.snippet.templateOptions[snippet_id].$el;
-            this.$el = $option.find(">li").clone();
-            this.data = $option.data();
-
-            this.required = this.$el.data("required");
+            this.option= option_id;
+            this.$el = option.$el.find(">li").clone();
+            this.data = option.$el.data();
 
             this.set_active();
-            this.$el.find('li[data-value] a').on('mouseenter mouseleave click', _.bind(this._mouse, this));
-            this.$el.not(':not([data-value])').find("a").on('mouseenter mouseleave click', _.bind(this._mouse, this));
-            this.$target.on('snippet-style-reset', _.bind(this.set_active, this));
+            this.$target.on('snippet-option-reset', _.bind(this.set_active, this));
+            this._bind_li_menu();
 
             this.start();
         },
-        _mouse: function (event) {
-            var self = this;
 
-            if (event.type === 'mouseleave') {
-                if (!this.over) return;
-                this.over = false;
-            } else if (event.type === 'click') {
-                this.over = false;
-            }else {
-                this.over = true;
-            }
+        _bind_li_menu: function () {
+            this.$el.filter("li:hasData").find('a:first')
+                .off('mouseenter click')
+                .on('mouseenter click', _.bind(this._mouse, this));
 
-            var $prev, $next;
-            if (event.type === 'mouseleave') {
-                $prev = $(event.currentTarget).parent();
-                $next = this.$el.find("li[data-value].active");
-            } else {
-                $prev = this.$el.find("li[data-value].active");
-                $next = $(event.currentTarget).parent();
-            }
-            if (!$prev.length) {
-                $prev = false;
-            }
-            if ($prev && $prev[0] === $next[0]) {
-                $next = false;
-                if (this.required) {
-                    return;
-                }
-            }
+            this.$el
+                .off('mouseenter click', "li:hasData a")
+                .on('mouseenter click', "li:hasData a", _.bind(this._mouse, this));
+
+            this.$el.closest("ul").add(this.$el)
+                .off('mouseleave')
+                .on('mouseleave', _.bind(this.reset, this));
+
+            this.$el
+                .off('mouseleave', "ul")
+                .on('mouseleave', "ul", _.bind(this.reset, this));
 
-            var np = {'$next': $next, '$prev': $prev};
+            this.reset_methods = [];
+            this.reset_time = null;
+        },
+
+        /**
+         * this method handles mouse:over and mouse:leave on the snippet editor menu
+         */
+         _time_mouseleave: null,
+        _mouse: function (event) {
+            var $next = $(event.currentTarget).parent();
 
+            // triggers preview or apply methods if a menu item has been clicked
+            this.select(event.type === "click" ? "click" : "over", $next);
             if (event.type === 'click') {
-                setTimeout(function () {
-                    self.set_active();
-                    self.$target.trigger("snippet-style-change", [self, np]);
-                },0);
-                this.select({'$next': $next, '$prev': $prev});
+                this.set_active();
+                this.$target.trigger("snippet-option-change", [this]);
             } else {
-                setTimeout(function () {
-                    self.$target.trigger("snippet-style-preview", [self, np]);
-                },0);
-                this.preview(np);
+                this.$target.trigger("snippet-option-preview", [this]);
             }
         },
-        /* set_active
+        /* 
         *  select and set item active or not (add highlight item and his parents)
         *  called before start
         */
         set_active: function () {
-            var self = this;
-            this.$el.find('li').removeClass("active");
-            var $active = this.$el.find('li[data-value]')
-                .filter(function () {
-                    var $li = $(this);
-                    return  ($li.data('value') && self.$target.hasClass($li.data('value')));
-                })
-                .first()
+            var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
+            this.$el.find('[data-check_class], [data-select_class]')
+                .add(this.$el)
+                .filter('[data-check_class], [data-select_class]')
+                .removeClass("active")
+                .filter('[data-check_class="' + classes.join('"], [data-check_class="') + '"] ,'+
+                    '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
                 .addClass("active");
-            this.$el.find('li:has(li[data-value].active)').addClass("active");
         },
 
         start: function () {
         },
 
-        onFocus : function () {
+        on_focus : function () {
+            this._bind_li_menu();
         },
 
-        onBlur : function () {
+        on_blur : function () {
         },
 
         on_clone: function ($clone) {
@@ -835,110 +727,167 @@
         drop_and_build_snippet: function () {
         },
 
-        select: function (np) {
-            var self = this;
-            // add or remove html class
-            if (np.$prev && this.required) {
-                this.$target.removeClass(np.$prev.data('value' || ""));
+        reset: function (event) {
+            var self = this, $el, method;
+            for (var k in self.reset_methods) {
+                method = self.reset_methods[k];
+                var $li = self.$el.find('[data-'+method+']').add(self.$el).filter('.active, :has(.active)');
+                if ($li.size()) {
+                    $li.each(function () {
+                        self.select("reset", $(this));
+                    });
+                } else {
+                    self[method]("reset", null, null);
+                }
             }
-            if (np.$next) {
-                this.$target.addClass(np.$next.data('value') || "");
+            self.reset_methods = [];
+            self.$target.trigger("snippet-option-reset", [this]);
+        },
+
+        // call data-method args as method
+        select: function (type, $li) {
+            var self = this,
+                $methods = [],
+                el = $li[0],
+                $el;
+            clearTimeout(this.reset_time);
+
+            function filter (k) { return k !== 'oeId' && k !== 'oeModel' && k !== 'oeField' && k !== 'oeXpath' && k !== 'oeSourceId';}
+            function hasData(el) {
+                for (var k in el.dataset) {
+                    if (filter (k)) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+            function method(el) {
+                var data = {};
+                for (var k in el.dataset) {
+                    if (filter (k)) {
+                        data[k] = el.dataset[k];
+                    }
+                }
+                return data;
+            }
+
+            while (el && this.$el.is(el) || _.some(this.$el.map(function () {return $.contains(this, el);}).get()) ) {
+                if (hasData(el)) {
+                    $methods.push(el);
+                }
+                el = el.parentNode;
             }
+
+            $methods.reverse();
+
+            _.each($methods, function (el) {
+                var $el = $(el);
+                var methods = method(el);
+                for (var k in methods) {
+                    if (self[k]) {
+                        if (self.reset_methods.indexOf(k) === -1) {
+                            self.reset_methods.push(k);
+                        }
+                        self[k](type, methods[k], $el);
+                    } else {
+                        console.error("'"+self.option+"' snippet have not method '"+k+"'");
+                    }
+                }
+            });
         },
 
-        preview: function (np) {
-            var self = this;
+        // default method for snippet
+        check_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-check_class]').add(this.$el).filter('[data-check_class]');
 
-            // add or remove html class
-            if (np.$prev) {
-                this.$target.removeClass(np.$prev.data('value') || "");
+            function map ($lis) {
+                return $lis.map(function () {return $(this).data("check_class");}).get().join(" ");
             }
-            if (np.$next) {
-                this.$target.addClass(np.$next.data('value') || "");
+            var classes = map($lis);
+            var active_classes = map($lis.filter('.active, :has(.active)'));
+
+            this.$target.removeClass(classes);
+            this.$target.addClass(active_classes);
+
+            if (type !== 'reset') {
+                this.$target.toggleClass(value);
             }
         },
+        select_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
+
+            var classes = $lis.map(function () {return $(this).data('select_class');}).get();
+
+            this.$target.removeClass(classes.join(" "));
+            if(value) this.$target.addClass(value);
+        },
 
         clean_for_save: dummy
     });
-
     website.snippet.options.background = website.snippet.Option.extend({
-        _get_bg: function () {
-            return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-        },
-        _set_bg: function (src) {
-            this.$target.css("background-image", src && src !== "" ? 'url(' + src + ')' : "");
-        },
         start: function () {
             this._super();
-            var src = this._get_bg();
-            this.$el.find("li[data-value].active.oe_custom_bg").data("src", src);
+            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+            if (this.$target.hasClass('oe_custom_bg')) {
+                this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
+            }
         },
-        select: function(np) {
-            var self = this;
-            this._super(np);
-            if (np.$next) {
-                if (np.$next.hasClass("oe_custom_bg")) {
-                    var $image = $('<img class="hidden"/>');
-                    $image.attr("src", np.$prev ? np.$prev.data("src") : '');
-                    $image.appendTo(self.$target);
-
-                    self.element = new CKEDITOR.dom.element($image[0]);
-                    var editor = new website.editor.MediaDialog(self, self.element);
-                    editor.appendTo(document.body);
-                    editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
-
-                    $image.on('saved', self, function (o) {
-                        var src = $image.attr("src");
-                        self._set_bg(src);
-                        np.$next.data("src", src);
-                        self.$target.trigger("snippet-style-change", [self, np]);
-                        $image.remove();
-                    });
-                    editor.on('cancel', self, function () {
-                        if (!np.$prev || np.$prev.data("src") === "") {
-                            self.$target.removeClass(np.$next.data("value"));
-                            self.$target.trigger("snippet-style-change", [self, np]);
-                        }
-                        $image.remove();
-                    });
-                } else {
-                    this._set_bg(np.$next.data("src"));
-                }
+        background: function(type, value, $li) {
+            if (value && value.length) {
+                this.$target.css("background-image", 'url(' + value + ')');
             } else {
-                this._set_bg(false);
-                this.$target.removeClass(np.$prev.data("value"));
+                this.$target.css("background-image", "").removeClass("oe_img_bg");
             }
         },
-        preview: function (np) {
-            this._super(np);
-            if (np.$next) {
-                this._set_bg(np.$next.data("src"));
-            }
+        choose_image: function(type, value, $li) {
+            if(type !== "click") return;
+
+            var self = this;
+            var $image = $('<img class="hidden"/>');
+            $image.attr("src", value);
+            $image.appendTo(self.$target);
+
+            self.element = new CKEDITOR.dom.element($image[0]);
+            var editor = new website.editor.MediaDialog(self, self.element);
+            editor.appendTo(document.body);
+            editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
+
+            $image.on('saved', self, function (o) {
+                var value = $image.attr("src");
+                self.$target.css("background-image", 'url(' + value + ')');
+                self.$el.find('li[data-select_class="oe_custom_bg"]').data("src", value);
+                self.$target.trigger("snippet-option-change", [self]);
+                $image.remove();
+                self.$target.addClass('oe_custom_bg').removeClass('oe_img_bg');
+                self.set_active();
+            });
+            editor.on('cancel', self, function () {
+                self.$target.removeClass("oe_img_bg")
+                    .trigger("snippet-option-change", [self]);
+                $image.remove();
+            });
         },
         set_active: function () {
             var self = this;
-            var bg = self.$target.css("background-image");
-            this.$el.find('li').removeClass("active");
-            this.$el.find('li').removeClass("btn-primary");
-            var $active = this.$el.find('li[data-value]')
-                .filter(function () {
-                    var $li = $(this);
-                    return  ($li.data('src') && bg.indexOf($li.data('src')) >= 0) ||
-                            (!$li.data('src') && self.$target.hasClass($li.data('value')));
-                })
-                .first();
-            if (!$active.length) {
-                $active = this.$target.css("background-image") !== 'none' ?
-                    this.$el.find('li[data-value].oe_custom_bg') :
-                    this.$el.find('li[data-value=""]');
-            }
+            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+            this._super();
 
-            //don't set active on an OpenDialog link, else it not possible to click on it again after.
-            // TODO in Saas-4 - Once bootstrap is in less
-            //      - add a class active-style to get the same display but without the active behaviour used by bootstrap in JS.
-            var classStr = _.string.contains($active[0].className, "oe_custom_bg") ? "btn-primary" : "active";
-            $active.addClass(classStr);
-            this.$el.find('li:has(li[data-value].active)').addClass(classStr);
+            this.$el.find('li[data-background]')
+                .filter(':not([data-background=""])')
+                .removeClass("active")
+                .each(function () {
+                    var background = $(this).data("background");
+                    if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
+                        $(this).addClass("active");
+                    }
+                });
+            if(!this.$el.find('li.active').size()) {
+                this.$el.find('li[data-select_class=""][data-background=""], '+
+                    'li[data-select_class=""] li[data-background=""], '+
+                    'li[data-background=""] li[data-select_class=""]').addClass("active");
+                this.$el.filter('li[data-select_class=""]').find('li[data-background=""]').addClass("active");
+                this.$el.filter('li[data-background=""]').find('li[data-select_class=""]').addClass("active");
+            }
         }
     });
 
@@ -983,7 +932,6 @@
         }
     });
 
-
     website.snippet.options.slider = website.snippet.Option.extend({
         unique_id: function () {
             var id = 0;
@@ -1029,14 +977,12 @@
             this.id = this.$target.attr("id");
             this.$inner = this.$target.find('.carousel-inner');
             this.$indicators = this.$target.find('.carousel-indicators');
-
-            this.$el.find(".js_add").on('click', function () {self.on_add_slide(); return false;});
-            this.$el.find(".js_remove").on('click', function () {self.on_remove_slide(); return false;});
-
             this.$target.carousel('pause');
             this.rebind_event();
         },
-        on_add_slide: function () {
+        add_slide: function (type, value) {
+            if(type !== "click") return;
+
             var self = this;
             var cycle = this.$inner.find('.item').length;
             var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
@@ -1054,7 +1000,9 @@
             },0);
             return $clone;
         },
-        on_remove_slide: function () {
+        remove_slide: function (type, value) {
+            if(type !== "click") return;
+
             if (this.remove_process) {
                 return;
             }
@@ -1083,6 +1031,13 @@
                 this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden");
             }
         },
+        interval : function(type, value) {
+            this.$target.attr("data-interval", value);
+        },
+        set_active: function () {
+            this.$el.find('li[data-interval]').removeClass("active")
+                .filter('li[data-interval='+this.$target.attr("data-interval")+']').addClass("active");
+        },
     });
     website.snippet.options.carousel = website.snippet.options.slider.extend({
         getSize: function () {
@@ -1092,12 +1047,11 @@
         },
         clean_for_save: function () {
             this._super();
-            this.$target.css("background-image", "");
-            this.$target.removeClass(this._class);
+            this.$target.removeClass('oe_img_bg ' + this._class).css("background-image", "");
         },
         load_style_options : function () {
             this._super();
-            $(".snippet-style-size li[data-value='']").remove();
+            $(".snippet-option-size li[data-value='']").remove();
         },
         start : function () {
             var self = this;
@@ -1108,46 +1062,30 @@
                 if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
                 return self._class || "";
             };
-            this.$target.on('snippet-style-change snippet-style-preview', function (event, style, np) {
-                var $active = self.$target.find(".item.active");
-                if (style['snippet-option-id'] === "size") return;
-                if (style['snippet-option-id'] === "background") {
-                    $active.css("background-image", self.$target.css("background-image"));
-                }
-                if (np.$prev) {
-                    $active.removeClass(np.$prev.data("value"));
-                }
-                if (np.$next) {
-                    $active.addClass(np.$next.data("value"));
-                    add_class(np.$next.data("value"));
+            this.$target.on('slid.bs.carousel', function () {
+                if(self.editor && self.editor.styles.background) {
+                    self.editor.styles.background.$target = self.$target.find(".item.active");
+                    self.editor.styles.background.set_active();
                 }
-            });
-            this.$target.on('slid', function () { // slide.bs.carousel
-                var $active = self.$target.find(".item.active");
-                self.$target
-                    .css("background-image", $active.css("background-image"))
-                    .removeClass(add_class($active.attr("class")))
-                    .addClass($active.attr("class"))
-                    .trigger("snippet-style-reset");
-
                 self.$target.carousel("pause");
             });
-            this.$target.trigger('slid');
+            this.$target.trigger('slid.bs.carousel');
         },
-        on_add_slide: function () {
-            var $clone = this._super();
+        add_slide: function (type, data) {
+            if(type !== "click") return;
 
+            var $clone = this._super(type, data);
             // choose an other background
             var bg = this.$target.data("snippet-option-ids").background;
             if (!bg) return $clone;
 
-            var $styles = bg.$el.find("li[data-value]:not(.oe_custom_bg)");
-            var styles_index = $styles.index($styles.filter(".active")[0]);
-            $styles.removeClass("active");
-            var $select = $($styles[styles_index >= $styles.length-1 ? 0 : styles_index+1]);
+            var $styles = bg.$el.find("li[data-background]");
+            var $select = $styles.filter(".active").removeClass("active").next("li[data-background]");
+            if (!$select.length) {
+                $select = $styles.first();
+            }
             $select.addClass("active");
-            $clone.css("background-image", $select.data("src") ? "url('"+ $select.data("src") +"')" : "");
-            $clone.addClass($select.data("value") || "");
+            $clone.css("background-image", $select.data("background") ? "url('"+ $select.data("background") +"')" : "");
 
             return $clone;
         },
@@ -1162,7 +1100,6 @@
             this._super();
         },
     });
-
     website.snippet.options.marginAndResize = website.snippet.Option.extend({
         start: function () {
             var self = this;
@@ -1290,7 +1227,7 @@
             return this.grid;
         },
 
-        onFocus : function () {
+        on_focus : function () {
             this._super();
             this.change_cursor();
         },
@@ -1390,7 +1327,7 @@
         hide_remove_button: function() {
             this.$overlay.find('.oe_snippet_remove').toggleClass("hidden", !this.$target.siblings().length);
         },
-        onFocus : function () {
+        on_focus : function () {
             this._super();
             this.hide_remove_button();
         },
@@ -1401,20 +1338,8 @@
             return false;
         },
         on_remove: function () {
-            if (!this.$target.siblings().length) {
-                var $parent = this.$target.parents(".row:first");
-                if($parent.find("[class*='col-md']").length > 1) {
-                    return false;
-                } else {
-                    if (!$parent.data("snippet-editor")) {
-                        this.BuildingBlock.create_overlay($parent);
-                    }
-                    $parent.data("snippet-editor").on_remove();
-                }
-            }
             this._super();
             this.hide_remove_button();
-            return false;
         },
         on_resize: function (compass, beginClass, current) {
             if (compass === 'w') {
@@ -1441,7 +1366,7 @@
         },
     });
 
-    website.snippet.options["resize"] = website.snippet.options.marginAndResize.extend({
+    website.snippet.options.resize = website.snippet.options.marginAndResize.extend({
         getSize: function () {
             this.grid = this._super();
             this.grid.size = 8;
@@ -1465,7 +1390,7 @@
                 this.$target.data("snippet-view", new website.snippet.animationRegistry.parallax(this.$target));
             }
             this.scroll();
-            this.$target.on('snippet-style-change snippet-style-preview', function () {
+            this.$target.on('snippet-option-change snippet-option-preview', function () {
                 self.$target.data("snippet-view").set_values();
             });
             this.$target.attr('contentEditable', 'false');
@@ -1474,22 +1399,15 @@
 
             this.$target.find('> div > div:not(.oe_structure) > .oe_structure').attr('contentEditable', 'true');
         },
-        scroll: function () {
-            var self = this;
-            var $ul = this.$el.find('ul[name="parallax-scroll"]');
-            var $li = $ul.find("li");
-            var speed = this.$target.data('scroll-background-ratio') || 0.6 ;
-            $ul.find('[data-value="' + speed + '"]').addClass('active');
-            $li.on('click', function (event) {
-                $li.removeClass("active");
-                $(this).addClass("active");
-                var speed =  $(this).data('value');
-                self.$target.attr('data-scroll-background-ratio', speed);
-                self.$target.data("snippet-view").set_values();
-                return false;
-            });
+        scroll: function (type, value) {
+            this.$target.attr('data-scroll-background-ratio', value);
             this.$target.data("snippet-view").set_values();
         },
+        set_active: function () {
+            var value = this.$target.attr('data-scroll-background-ratio') || 0;
+            this.$el.find('[data-scroll]').removeClass("active")
+                .filter('[data-scroll="' + (this.$target.attr('data-scroll-background-ratio') || 0) + '"]').addClass("active");
+        },
         clean_for_save: function () {
             this._super();
             this.$target.find(".parallax")
@@ -1502,24 +1420,22 @@
         start: function () {
             var self = this;
             this._super();
-
-            this.$el.find(".clear-style").click(function (event) {
-                self.$target.removeClass("fa-spin").attr("style", "");
-                self.resetTransfo();
-            });
-
-            this.$el.find(".style").click(function (event) {
-                var settings = self.$target.data("transfo").settings;
-                self.$target.transfo({ hide: (settings.hide = !settings.hide) });
-            });
-
             this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
-
             this.$overlay.find('[data-toggle="dropdown"]')
                 .on("mousedown", function () {
                     self.$target.transfo("hide");
                 });
         },
+        style: function (type, value) {
+            if (type !== 'click') return;
+            var settings = this.$target.data("transfo").settings;
+            this.$target.transfo({ hide: (settings.hide = !settings.hide) });
+        },
+        clear_style: function (type, value) {
+            if (type !== 'click') return;
+            this.$target.removeClass("fa-spin").attr("style", "");
+            this.resetTransfo();
+        },
         resetTransfo: function () {
             var self = this;
             this.$target.transfo("destroy");
@@ -1541,10 +1457,10 @@
                 })
                 .mouseover();
         },
-        onFocus : function () {
+        on_focus : function () {
             this.resetTransfo();
         },
-        onBlur : function () {
+        on_blur : function () {
             this.$target.transfo("hide");
         },
     });
@@ -1557,7 +1473,7 @@
             website.snippet.start_animation(true, this.$target);
 
             $(document.body).on("media-saved", self, function (event, prev , item) {
-                self.editor.onBlur();
+                self.editor.on_blur();
                 self.BuildingBlock.make_active(false);
                 if (self.$target.parent().data("oe-field") !== "image") {
                     self.BuildingBlock.make_active($(item));
@@ -1571,7 +1487,7 @@
                 new website.editor.MediaDialog(self, self.element).appendTo(document.body);
             });
         },
-        onFocus : function () {
+        on_focus : function () {
             var self = this;
             if (this.$target.parent().data("oe-field") === "image") {
                 this.$overlay.addClass("hidden");
@@ -1582,39 +1498,16 @@
         },
     });
 
-
     website.snippet.Editor = openerp.Class.extend({
         init: function (BuildingBlock, dom) {
             this.BuildingBlock = BuildingBlock;
             this.$target = $(dom);
             this.$overlay = this.$target.data('overlay');
-            this.snippet_id = this.$target.data("snippet-id");
-            this._readXMLData();
             this.load_style_options();
             this.get_parent_block();
             this.start();
         },
 
-        /*
-        *  _readXMLData
-        *  Read data XML and set value into:
-        *  this.$el :
-        *       all xml data
-        *  this.$overlay :
-        *       Dom hover the $target who content options
-        */
-        _readXMLData: function() {
-            var self = this;
-            if(this && this.BuildingBlock && this.BuildingBlock.$snippets) {
-                this.$el = this.BuildingBlock.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone();
-            }
-            var $options = this.$overlay.find(".oe_overlay_options");
-            if ($options.find(".oe_options ul li").length) {
-                $options.find(".oe_options").removeClass("hidden");
-            }
-        },
-
-
         // activate drag and drop for the snippets in the snippet toolbar
         _drag_and_drop: function(){
             var self = this;
@@ -1700,18 +1593,18 @@
             this.selector_siblings = [];
             this.selector_children = [];
             this.selector_vertical_children = [];
-            _.each(website.snippet.templateOptions, function (val) {
+            _.each(website.snippet.templateOptions, function (val, option_id) {
                 if (!self.$target.is(val.selector)) {
                     return;
                 }
-                if (val['selector-siblings']) self.selector_siblings.push(val['selector-siblings']);
-                if (val['selector-children']) self.selector_children.push(val['selector-children']);
-                if (val['selector-vertical-children']) self.selector_vertical_children.push(val['selector-vertical-children']);
-
-                var style = val['snippet-option-id'];
-                var Editor = website.snippet.options[style] || website.snippet.Option;
-                var editor = self.styles[style] = new Editor(self.BuildingBlock, self, self.$target, style);
-                $ul.append(editor.$el.addClass("snippet-style-" + style));
+                if (val['drop-near']) self.selector_siblings.push(val['drop-near']);
+                if (val['drop-in']) self.selector_children.push(val['drop-in']);
+                if (val['drop-in-vertical']) self.selector_vertical_children.push(val['drop-in-vertical']);
+
+                var option = val['option'];
+                var Editor = website.snippet.options[option] || website.snippet.Option;
+                var editor = self.styles[option] = new Editor(self.BuildingBlock, self, self.$target, option_id);
+                $ul.append(editor.$el.addClass("snippet-option-" + option));
             });
             this.selector_siblings = this.selector_siblings.join(",");
             if (this.selector_siblings === "")
@@ -1724,7 +1617,7 @@
                 this.selector_vertical_children = false;
 
             if (!this.selector_siblings && !this.selector_children && !this.selector_vertical_children) {
-                this.$overlay.find(".oe_snippet_move").addClass('hidden');
+                this.$overlay.find(".oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove").addClass('hidden');
             }
 
 
@@ -1772,13 +1665,35 @@
         },
 
         on_remove: function () {
-            this.onBlur();
+            this.on_blur();
             var index = _.indexOf(this.BuildingBlock.snippets, this.$target.get(0));
             for (var i in this.styles){
                 this.styles[i].on_remove();
             }
             delete this.BuildingBlock.snippets[index];
+
+            // remove node and his empty
+            var parent,
+                node = this.$target.parent()[0];
+
             this.$target.remove();
+            function check(node) {
+                if ($(node).outerHeight() > 8) {
+                    return false;
+                }
+                for (var k=0; k<node.children.length; k++) {
+                    if (node.children[k].tagName || node.children[k].textContent.match(/[^\s]/)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            while (check(node)) {
+                parent = node.parentNode;
+                parent.removeChild(node);
+                node = parent;
+            }
+
             this.$overlay.remove();
             return false;
         },
@@ -1794,22 +1709,22 @@
             }
         },
 
-        /* onFocus
+        /* on_focus
         *  This method is called when the user click inside the snippet in the dom
         */
-        onFocus : function () {
+        on_focus : function () {
             this.$overlay.addClass('oe_active');
             for (var i in this.styles){
-                this.styles[i].onFocus();
+                this.styles[i].on_focus();
             }
         },
 
-        /* onFocus
+        /* on_focus
         *  This method is called when the user click outside the snippet in the dom, after a focus
         */
-        onBlur : function () {
+        on_blur : function () {
             for (var i in this.styles){
-                this.styles[i].onBlur();
+                this.styles[i].on_blur();
             }
             this.$overlay.removeClass('oe_active');
         },
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
new file mode 100644
index 00000000000..ed700bdd371
--- /dev/null
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -0,0 +1,348 @@
+(function() {
+    'use strict';
+    
+    var website = openerp.website,
+        _t = openerp._t;
+
+    /*--------------------------------------------------------------------------
+     Template files to load
+     --------------------------------------------------------------------------*/
+    website.add_template_file('/website/static/src/xml/website.gallery.xml');
+
+    /*--------------------------------------------------------------------------
+      Gallery Snippet
+      
+      This is the snippet responsible for configuring the image galleries.
+      Look at /website/views/snippets.xml for the available options
+      ------------------------------------------------------------------------*/
+    website.snippet.options.gallery = website.snippet.Option.extend({
+        start  : function() {
+            this._super();
+            this.bind_change();
+        },
+        styling  : function(type, value) {
+            var classes = this.$el.find('li[data-styling]').map(function () {
+                return $(this).data('styling');
+            }).get().join(' ');
+            this.$target.find("img").removeClass(classes).addClass(value);
+        },
+        interval : function(type, value) {
+            this.$target.find('.carousel:first').attr("data-interval", value);
+        },
+        reapply : function() {
+            var self    = this,
+                modes   = [ 'o_nomode', 'o_grid', 'o_masonry', 'o_slideshow' ],
+                classes = this.$target.attr("class").split(/\s+/);
+            if (this.block) return;
+            modes.forEach(function(mode) {
+                if (classes.indexOf(mode) != -1) {
+                    self.mode("reapply", mode);
+                    return;
+                }
+            });
+        },
+        bind_change: function () {
+            var self = this;
+            return this.$target.find("img").off('saved').on('saved', function (event, img) {
+                    var $parent = $(img).parent();
+                    $parent.addClass("saved_active");
+                    var index = self.$target.find(".item.saved_active").index();
+                    $parent.removeClass("saved_active");
+                    self.$target.find(".carousel:first li[data-target]:eq("+index+")").css("background-image", "url("+$(img).attr("src")+")");
+                });
+        },
+        get_imgs: function () {
+            return this.$target.find("img").addClass("img img-thumbnail img-responsive mb8 mt8").detach();
+        },
+        mode: function (type, value) {
+            if (this.block) return;
+            if (!value) value = 'nomode';
+            this[value]();
+            this.$target.removeClass('o_nomode o_masonry o_grid o_slideshow').addClass("o_"+value);
+            this.bind_change();
+        },
+        replace: function ($content) {
+            var $container = this.$target.find(".container:first");
+            $container.empty().append($content);
+            return $container;
+        },
+        nomode : function() {
+            var self = this,
+                $row     = $('<div class="row"></div>'),
+                $imgs = this.get_imgs().wrap('<div>').parent();
+
+            this.replace($row);
+
+            $imgs.each(function () {
+                var img = this.childNodes[0];
+                if (img.width >= img.height * 2) {
+                    $(this).addClass("col-md-6");
+                } else if (img.width > 600) {
+                    $(this).addClass("col-md-6");
+                } else {
+                    $(this).addClass("col-md-3");
+                }
+            });
+            $row.append($imgs);
+            this.$target.css("height", "");
+        },
+        masonry : function() {
+            var self     = this,
+                $imgs    = this.get_imgs(),
+                columns  = this.get_columns(),
+                colClass = undefined,
+                $cols    = [];
+
+            var $row = $("<div class='row'/>");
+            this.replace($row);
+            
+            // if no columns let's default to 3, here we must update the DOM accordingly :'(
+            if (columns === 0) {
+                columns = 3;
+                this.$target.attr("data-columns", columns);
+            }
+            colClass = "col-md-"+(12/columns);
+
+            // create columns
+            for (var c = 0; c < columns; c++) {
+                var $col = $('<div class="col"></div>').addClass(colClass);
+                $row.append($col);
+                $cols.push($col.get()[0]);
+            }
+
+            this.block = true;
+            $cols = $($cols);
+            var imgs = $imgs.get();
+            function add() {
+                self.lowest($cols).append(imgs.pop());
+                if (imgs.length) setTimeout(add, 0);
+                else self.block = false;
+            }
+            if (imgs.length) add();
+            this.$target.css("height", "");
+        },
+        grid : function() {
+            var self     = this,
+                $cols    = this.get_imgs().wrap('<div>').parent(),
+                $col, $img,
+                $row     = $('<div class="row"></div>'),
+                columns  = this.get_columns() || 3,
+                colClass = "col-md-"+(12/columns),
+                $container = this.replace($row);
+
+            $cols.each(function(index) { // 0 based index
+                $col = $(this);
+                $img = $col.find('img');
+                self.img_preserve_styles($img);
+                self.img_responsive($img);
+                $col.addClass(colClass);
+                $col.appendTo($row);
+                if ( (index+1) % columns === 0) {
+                    $row = $('<div class="row"></div>');
+                    $row.appendTo($container);
+                }
+            });
+            this.$target.css("height", "");
+        },
+        slideshow :function () {
+            var self = this;
+            var $imgs = this.$target.find("img").detach(),
+                urls = $imgs.map(function() { return $(this).attr("src"); } ).get(),
+                params = {
+                        srcs : urls,
+                        index: 1,
+                        title: "",
+                        interval : this.$target.data("interval") || false,
+                        id: _.uniqueId("slideshow_")
+                },
+                $slideshow = $(openerp.qweb.render('website.gallery.slideshow', params));
+            this.replace($slideshow);
+            this.$target.css("height", Math.round(window.innerHeight*0.7));
+        },
+        columns : function(type, value) {
+            if (this.block) return;
+            this.$target.attr("data-columns", value);
+            this.reapply();
+        },
+        albumimages : function(type, value) {
+            if(type === "click") this[value]();
+        },
+        images_add : function() {
+            /* will be moved in ImageDialog from MediaManager */
+            var self = this,
+                $container = this.$target.find(".container:first"),
+                $upload_form = $(openerp.qweb.render('website.gallery.dialog.upload')),
+                $progress = $upload_form.find(".fa");
+
+            $upload_form.appendTo(document.body);
+            
+            $upload_form.on('modal.bs.hide', function() { $(this).remove(); } );
+            
+            $upload_form.find(".alert-success").hide();
+            $upload_form.find(".alert-danger").hide();
+
+            $upload_form.on("change", 'input[name="upload"]', function(event) {
+                $upload_form.find('input[type="submit"]').parent().removeClass("hidden");
+                $upload_form.find(".alert").hide();
+            });
+
+            $upload_form.find("form").on("submit", function(event) {
+                event.preventDefault();
+                var files = $(this).find('input[type="file"]')[0].files;
+                var formData = new FormData();
+                for (var i = 0; i < files.length; i++ ) {
+                    var file = files[i];
+                    formData.append('upload', file, file.name);
+                }
+
+                /* 
+                 * hide submit button
+                 */
+                $('input[name="upload"], input[type="submit"]', this).parent().addClass("hidden");
+
+                /* 
+                 * show progress
+                 */
+                $progress.removeClass("hidden");
+
+                /* 
+                 * Images upload callback
+                 */
+                var callback = _.uniqueId('func_');
+                formData.append("func", callback);
+                window[callback] = function (attachments, error) {
+                    delete window[callback];
+
+                    $('input[name="upload"]', this).parent().removeClass("hidden");
+
+                    if (error) { /* failure */
+
+                        $upload_form.find(".alert-danger").show();
+
+                    } else { /* success */
+
+                        $upload_form.find(".alert-success").show();
+                        for (var i = 0 ; i < attachments.length; i++) {
+                            $('<img class="img img-thumbnail img-responsive mb8 mt8"/>')
+                                .attr("src", attachments[i].website_url)
+                                .appendTo($container);
+                        }
+                        $progress.addClass("hidden");
+                        $upload_form.remove();
+                        self.reapply(); // refresh the $target
+                    }
+                };
+
+                /* 
+                 * Images upload : don't change order of contentType & processData
+                 * and don't change their values, otherwise the XHR will be 
+                 * wrongly conceived by jQuery. 
+                 * 
+                 * (missing boundary in the content-type header field)
+                 * Leading to an upload failure.
+                 */
+                $.ajax('/website/attach', {
+                    type: 'POST',
+                    data: formData,
+                    contentType: false,  /* multipart/form-data for files */
+                    processData: false,
+                    dataType: 'text'
+                    }).done(function (script) {
+                        $(script).appendTo('head').remove();
+                    });
+            });
+            $upload_form.modal({ backdrop : false });
+
+            $upload_form.find('input[name="upload"]').click();
+        },
+        images_rm   : function() {
+            this.replace($('<div class="alert alert-info css_editable_mode_display" style="display: none;"/>').text(_t("Add Images from the 'Customize' menu")));
+        },
+        sizing : function() { // done via css, keep it to avoid undefined error
+        },
+        /*
+         *  helpers
+         */
+        styles_to_preserve : function($img) {
+            var styles = [ 'img-rounded', 'img-thumbnail', 'img-circle', 'shadow', 'fa-spin' ];
+            var preserved = [];
+            
+            for (var style in styles) {
+                if ($img.hasClass(style)) {
+                    preserved.push(style);
+                }
+            }
+            return preserved.join(' ');
+        },
+        img_preserve_styles : function($img) {
+            var classes = this.styles_to_preserve($img);
+            $img.removeAttr("class");
+            $img.addClass(classes);
+            return $img;
+        },
+        img_from_src : function(src) {
+            var self = this;
+            var $img = $("<img/>").attr("src", src);
+            return $img;
+        },
+        img_responsive : function(img) {
+            img.addClass("img img-responsive");
+            return img;
+        },
+        lowest : function($cols) {
+            var height = 0, min = -1, col=0, lowest = undefined;
+            $cols.each(function () {
+                var $col = $(this);
+                height = $col.height();
+                if (min === -1 || height < min) {
+                    min = height;
+                    lowest = $col;
+                }
+            });
+            return lowest;
+        },
+        get_columns : function() {
+            return parseInt(this.$target.attr("data-columns") || 3);
+        },
+
+        clean_for_save: function() {
+            var self = this;
+            if (this.$target.hasClass("slideshow")) {
+                this.$target.removeAttr("style");
+            }
+        },
+
+        set_active: function () {
+            this._super();
+            var classes = _.uniq((this.$target.attr("class").replace(/(^|\s)o_/g, ' ') || '').split(/\s+/));
+            var $li = this.$el.find('[data-mode]')
+                .removeClass("active")
+                .filter('[data-mode="' + classes.join('"], [data-mode="') + '"]').addClass("active");
+            var mode = this.$el.find('[data-mode].active').data('mode');
+
+            var classes = _.uniq((this.$target.find("img:first").attr("class") || '').split(/\s+/));
+            var $li = this.$el.find('[data-styling]')
+                .removeClass("active")
+                .filter('[data-styling="' + classes.join('"], [data-styling="') + '"]').addClass("active");
+
+            this.$el.find('li[data-interval]').removeClass("active")
+                .filter('li[data-interval='+this.$target.find(".carousel:first").attr("data-interval")+']')
+                .addClass("active");
+
+            var interval = this.$target.find('.carousel:first').attr("data-interval");
+            var $li = this.$el.find('[data-interval]')
+                .removeClass("active")
+                .filter('[data-interval=' + interval + ']').addClass("active");
+
+            var columns = this.get_columns();
+            var $li = this.$el.find('[data-columns]')
+                .removeClass("active")
+                .filter('[data-columns=' + columns + ']').addClass("active");
+
+            this.$el.find('[data-columns]:first, [data-select_class="spc-none"]')
+                .parent().parent().toggle(["grid", "masonry"].indexOf(mode) !== -1);
+            this.$el.find('[data-interval]:first').parent().parent().toggle(mode === "slideshow");
+        },
+    }); // website.snippet.Option.extend
+
+})(); // anonymous function
diff --git a/addons/website/static/src/js/website.theme.js b/addons/website/static/src/js/website.theme.js
index 61655ea3e7b..26bce16c0b6 100644
--- a/addons/website/static/src/js/website.theme.js
+++ b/addons/website/static/src/js/website.theme.js
@@ -1,7 +1,20 @@
 (function () {
     'use strict';
 
-    openerp.website.add_template_file('/website/static/src/xml/website.theme.xml');
+    openerp.jsonRpc('/web/dataset/call', 'call', {
+            'model': 'ir.ui.view',
+            'method': 'read_template',
+            'args': ['website.theme_customize', openerp.website.get_context()]
+        }).done(function (data) {
+        openerp.qweb.add_template(data);
+    });
+    openerp.jsonRpc('/web/dataset/call', 'call', {
+            'model': 'ir.ui.view',
+            'method': 'read_template',
+            'args': ['website.colorpicker', openerp.website.get_context()]
+        }).done(function (data) {
+        openerp.qweb.add_template(data);
+    });
 
     openerp.website.Theme = openerp.Widget.extend({
         template: 'website.theme_customize',
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 24d54ec017e..607759cb0c2 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -203,7 +203,7 @@
                   class="form-inline">
                 <div class="well">
                     <div class="form-group pull-left">
-                        <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                        <input type="file" name="upload" accept="image/*" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                         <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
                         <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
                     </div>
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
new file mode 100644
index 00000000000..cefe50a5319
--- /dev/null
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <!-- 
+    =======================================================================
+        Gallery Dialog
+     
+        This template is shown when creating a gallery, allowing users to upload
+        images.
+     ======================================================================= 
+     -->
+
+    <t t-name="website.gallery.dialog.upload">
+        <div class="modal fade" >
+            <div class="modal-dialog" style="max-width: 50%;">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><![CDATA[&times;]]></button>
+                        <h4 class="modal-title">Add images</h4>
+                    </div>
+                    <div class="modal-body">
+                        <form action="/website/attach" method="post" enctype="multipart/form-data" >
+                            <div class="form-group">
+                                <input name="upload" type="file" value="Choose images" multiple="multiple" accept="image/*"/> 
+                            </div>
+                            <div class="form-group hidden">
+                                <input type="submit" value="Upload images" class="btn btn-default" />
+                            </div>
+                        </form>
+                        <div class="text-center"><span class="fa fa-refresh fa-5x fa-spin hidden"></span></div>
+                        <div class="alert alert-success" role="alert">Upload successful.</div>
+                        <div class="alert alert-danger" role="alert">Upload failed, some images might not have been uploaded. Check your network connectivity.</div>
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <!-- 
+        ========================================================================
+        Gallery Slideshow
+                
+        This template is used to display a slideshow of images inside a 
+        bootstrap carousel.
+        
+        ========================================================================
+    -->
+
+    <t t-name="website.gallery.slideshow">
+        <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}">
+            <div class="carousel-inner container">
+                 <t t-foreach="srcs" t-as="src">
+                    <div t-attf-class="item #{src_index == index and 'active' or ''}">
+                        <img class="img" t-att-src="src"/>
+                    </div>
+                 </t>
+            </div>
+
+            <ul class="carousel-indicators">
+                <t t-foreach="srcs" t-as="src">
+                    <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="src_index == index and 'active'" t-attf-style="background-image: url(#{src})"></li>
+                </t>
+            </ul>
+            
+            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" /></a> 
+            <a class="carousel-control right" t-attf-href="##{id}" data-slide="next"><span class="glyphicon glyphicon-chevron-right" /></a>
+        </div> <!-- carousel-id -->
+        <script type="text/javascript">
+            (function() {
+            $(".slideshow").css("height", Math.round(window.innerHeight*0.7));
+            $(window).on("resize", function() { $(".slideshow").css("height", Math.round(window.innerHeight*0.7)); });
+            })();
+        </script>
+    </t>
+    
+    <!--
+        ========================================================================
+        Gallery Slideshow LightBox
+        
+        This template is used to display a lightbox with a slideshow.
+        
+        This template wraps website.gallery.slideshow in a bootstrap modal
+        dialog.
+        ========================================================================
+    -->
+    <t t-name="website.gallery.slideshow.lightbox">
+
+        <div class="modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
+
+            <div class="modal-dialog modal-lg" role="Picture Gallery"
+                t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
+                <div class="modal-content">
+                    <div class="modal-body o_slideshow">
+                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&amp;times;</span><span class="sr-only">Close</span></button>
+                        <t t-call="website.gallery.slideshow"></t>
+                    </div>
+
+                </div> 
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 4b37ccc5e65..1db2433a4d4 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -4,7 +4,7 @@
     <!-- Snippet loader -->
     <t t-name="website.snippets_button">
         <li class="navbar-form js_hide_on_translate" style="margin-top: 6px;">
-            <button type="button" data-action="snippet" class="hidden btn btn-primary btn-xs">Insert Blocks</button>
+            <button type="button" data-action="snippet" class="btn btn-primary btn-xs">Insert Blocks</button>
         </li>
     </t>
     <t t-name="website.snippets_style">
@@ -53,13 +53,4 @@
         <div class='oe_snippet_manipulator'></div>
     </t>
 
-    <!-- snippet objects -->
-
-    <div t-name="website.snippets.resize" data-snippet-id='resize'>
-        <!-- custom data for the widget -->
-        <div class='oe_snippet_thumbnail'>Margin resize</div>
-    </div>
-
-    <div t-name="website.snippets.colmd" data-snippet-id='colmd' data-selector-vertical-children='.row'></div>
-
 </templates>
diff --git a/addons/website/static/src/xml/website.theme.xml b/addons/website/static/src/xml/website.theme.xml
deleted file mode 100644
index 16f4961d367..00000000000
--- a/addons/website/static/src/xml/website.theme.xml
+++ /dev/null
@@ -1,159 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates id="template" xml:space="preserve">
-
-<!--
-    Customize Themes
-
-    Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
-    'data-xmlid' (optional) xml id of the template to add if the input is checked.
-        You can set a list of xml id separate by comma (all template is enable or 
-        disable in same time)
-    'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
-    'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
-    'data-reload="/"' (optional) force the reloading of the page if the url match with
-        the string ( = regexp).
-        Otherwise, only the '/web/css/website.assets_frontend' is reloaded
-
-    For the sets (data-enable and/or data-disable without data-xmlid), the set is
-    automatically checked if:
-    - all related fields are enabled for data-enable
-    - all related fields are disabled for data-disable
-    else unchecked
-    
-    HTML apply classes:
-    - 'checked': on the parent label when input is checked
-    - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together 
-       out is added)
-    - 'out': on the container 1 second before removed from ths DOM
-    - 'loading': on the container/modal when the new css is loading
--->
-
-<t t-name="website.theme_customize">
-  <div id="theme_customize_modal" class="modal fade">
-      <div class="modal-dialog">
-          <div class="modal-content">
-              <input id="less" data-xmlid="website.option_bootstrap_less" style="display: none;"/>
-
-              <div class="loading_backdrop"></div>
-              <div class="modal-header">
-                  <button type="button" class="close">×</button>
-                  <h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
-              </div>
-              <div class="modal-body">
-                  <h5 class="modal-h5">LAYOUT</h5>
-                  <table name="layout">
-                      <tr>
-                          <td class=" text-center" width="50%">
-                              <label class=" center-block">
-                                  <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
-                                  <input name="layoutvar" type="radio" data-xmlid=""/>
-                              </label>                                 
-                          </td>
-                          <td class=" text-center">
-                              <label class=" center-block">
-                                 <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
-                                  <input name="layoutvar" type="radio" data-xmlid="website.option_layout_boxed" data-enable="less"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">MAIN COLOR</h5>
-                  <table name="color">
-                      <tr>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="" data-disable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_emerald" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_cobalt" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_amethyst" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_ruby" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_gold" data-enable="less"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">FONTS COMBINATIONS</h5>
-                  <table name="font">
-                      <tr>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
-                                  </div>
-                                  <input name="theme" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
-                                    <input name="theme" type="radio" data-xmlid="website.option_font" data-enable="less"/>
-                                  </div>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-              </div>
-          </div>
-      </div>
-  </div>
-</t>
-
-<!-- color-picker -->
-<!-- HTML class to hide option for one mode : only-text, only-bg -->
-
-<t t-name="website.colorpicker">
-    <table class="colorpicker">
-        <tr>
-            <td><button class="automatic-color" title="Automatic Color"/></td>
-            <td><button class="bg-primary" title="Primary Color"/></td>
-            <td><button class="bg-success" title="Success Color"/></td>
-            <td><button class="bg-info" title="Info Color"/></td>
-            <td><button class="bg-warning" title="Warning Color"/></td>
-            <td><button class="bg-danger" title="Danger Color"/></td>
-        </tr>
-        <tr><td colspan="8"><hr style="width: 100%; height: 1px;"/></td></tr>
-        <tr>
-            <td><button class="bg-blue"/></td>
-            <td><button class="bg-turquoise"/></td>
-            <td><button class="bg-green"/></td>
-            <td><button class="bg-yellow"/></td>
-            <td><button class="bg-red"/></td>
-            <td><button class="bg-pink"/></td>
-            <td><button class="bg-purple"/></td>
-            <td><button class="bg-brown"/></td>
-        </tr>
-    </table>
-</t>
-    
-</templates>
-\ No newline at end of file
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 4d1c267c98e..66db6e49df3 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -18,7 +18,7 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
             <span class="oe_snippet_thumbnail_title">Banner</span>
         </div>
-        <div id="myCarousel" class="oe_snippet_body carousel slide mb32" style="height: 320px;">
+        <div id="myCarousel" class="oe_snippet_body carousel slide mb32" data-interval="10000" style="height: 320px;">
             <!-- Indicators -->
             <ol class="carousel-indicators hidden">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -365,36 +365,32 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
             <span class="oe_snippet_thumbnail_title">Image Gallery</span>
         </div>
-        <section class="oe_snippet_body">
+        <section class="oe_snippet_body o_gallery o_nomode o_spc-none">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-12 text-center mt16 mb32">
-                        <h2>Our Customer References</h2>
-                        <h4 class="text-muted">More than 500 successful projects</h4>
-                    </div>
                     <div class="col-md-6">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/desert.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/desert_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
                     </div>
                     <div class="col-md-6">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/landscape.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/landscape.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                 </div>
             </div>
@@ -641,7 +637,7 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
             <span class="oe_snippet_thumbnail_title">Quotes Slider</span>
         </div>
-        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0">
+        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators mb0">
                 <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -770,7 +766,7 @@
                  style="background-image: url('/website/static/src/img/parallax/quote.png')"
                 data-scroll-background-ratio="0.3">
             <div><div><div class="oe_structure">
-                    <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0">
+                    <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
                         <!-- Indicators -->
                         <ol class="carousel-indicators mb0">
                             <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -834,48 +830,113 @@
 
 <template id="snippet_options">
 
-    <div data-snippet-option-id='blog-style'
-        data-selector="section:not(.carousel):not(.parallax)">
+    <div data-option='blog-style'
+        data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
             <ul class="dropdown-menu">
-                <li data-value="para_large"><a>Bigger Text</a></li>
-                <li data-value="readable"><a>Narrow</a></li>
+                <li data-check_class="para_large"><a>Bigger Text</a></li>
+                <li data-check_class="readable"><a>Narrow</a></li>
             </ul>
         </li>
     </div>
 
-    <div data-snippet-option-id='background'
-        data-selector="section, .carousel, .parallax">
-        <li class="dropdown-submenu" data-required="true">
+    <div data-option='background'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
+        <li class="dropdown-submenu" data-select_class="oe_img_bg" data-background="">
             <a tabindex="-1" href="#">Background</a>
             <ul class="dropdown-menu">
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
-                <li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
-                <li data-value=""><a>None</a></li>
+                <li data-background="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
+                <li data-background="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
+                <li data-background="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
+                <li data-background="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
+                <li data-background="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
+                <li data-background="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
+                <li data-background="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
+                <li data-background="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
+                <li data-background="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
+                <li data-background="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
+                <li data-background="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
+                <li data-background="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
+                <li data-background="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
+                <li data-background="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
+                <li data-background="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
+                <li data-background="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
+                <li data-background="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
+                <li data-select_class=""><a>None</a></li>
                 <li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>
-                <li class="oe_custom_bg" data-value="oe_img_bg"><a><b>Choose an image...</b></a></li>
+                <li data-select_class="oe_custom_bg" data-choose_image="choose_image" data-background=""><a><b>Choose an image...</b></a></li>
+            </ul>
+        </li>
+    </div>
+     
+    <div data-option='gallery' data-selector=".o_gallery">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Mode</a>
+            
+            <ul class="dropdown-menu">
+                <li data-mode="nomode"   > <a>None</a></li>
+                <li data-mode="masonry"  > <a>Masonry</a> </li>
+                <li data-mode="grid"     > <a>Grid</a> </li>
+                <li data-mode="slideshow"> <a>Slideshow</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Columns</a>
+            
+            <ul class="dropdown-menu">
+                <li data-columns="1"  > <a>1</a> </li>
+                <li data-columns="2"  > <a>2</a> </li>
+                <li data-columns="3"  > <a>3</a> </li>
+                <li data-columns="4"  > <a>4</a> </li>
+                <li data-columns="6"  > <a>6</a> </li>
+                <li data-columns="12" > <a>12</a> </li>
             </ul>
         </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Images spacing</a>
+
+            <ul class="dropdown-menu">
+                <li data-select_class="o_spc-none"  > <a>None</a>   </li>
+                <li data-select_class="o_spc-small" > <a>Small</a>  </li>
+                <li data-select_class="o_spc-medium"> <a>Medium</a> </li>
+                <li data-select_class="o_spc-big"   > <a>Big</a>    </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Album</a>
+           
+           <ul class="dropdown-menu">
+               <li data-albumimages="images_add"> <a>Add images</a></li>
+               <li data-albumimages="images_rm"><a>Remove all images</a></li>
+           </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Styling</a>
+           
+           <ul class="dropdown-menu">
+               <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
+               <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
+               <li data-styling="img-circle"    ><a>Circle</a></li>
+               <li data-styling="shadow"        ><a>Shadows</a></li>
+               <li data-styling="fa-spin"       ><a>Spinning</a></li>
+           </ul>
+        </li>
     </div>
 
-    <div data-snippet-option-id='colorpicker'
-        data-selector="section, .carousel, .parallax">
+    <div data-option='colorpicker'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Color</a>
             <ul class="dropdown-menu">
@@ -883,77 +944,149 @@
             </ul>
         </li>
     </div>
+     
+    <div data-option='gallery' data-selector=".gallery">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Mode</a>
+            
+            <ul class="dropdown-menu">
+                <li data-mode="nomode"   > <a>None</a></li>
+                <li data-mode="masonry"  > <a>Masonry</a> </li>
+                <li data-mode="grid"     > <a>Grid</a> </li>
+                <li data-mode="slideshow"> <a>Slideshow</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Columns</a>
+            
+            <ul class="dropdown-menu">
+                <li data-columns="1"  > <a>1</a> </li>
+                <li data-columns="2"  > <a>2</a> </li>
+                <li data-columns="3"  > <a>3</a> </li>
+                <li data-columns="4"  > <a>4</a> </li>
+                <li data-columns="6"  > <a>6</a> </li>
+                <li data-columns="12" > <a>12</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Images spacing</a>
 
-    <div data-snippet-option-id='carousel'
-        data-selector=".carousel">
-        <li class="divider"></li>
-        <li>
-            <a href="#" class="button js_add">Add Slide</a>
+            <ul class="dropdown-menu">
+                <li data-select_class="spc-none"  > <a>None</a>   </li>
+                <li data-select_class="spc-small" > <a>Small</a>  </li>
+                <li data-select_class="spc-medium"> <a>Medium</a> </li>
+                <li data-select_class="spc-big"   > <a>Big</a>    </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Album</a>
+           
+           <ul class="dropdown-menu">
+               <li data-albumimages="images_add"> <a>Add images</a></li>
+               <li data-albumimages="images_rm"><a>Remove all images</a></li>
+           </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Styling</a>
+           
+           <ul class="dropdown-menu">
+               <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
+               <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
+               <li data-styling="img-circle"    ><a>Circle</a></li>
+               <li data-styling="shadow"        ><a>Shadows</a></li>
+               <li data-styling="fa-spin"       ><a>Spinning</a></li>
+           </ul>
         </li>
-        <li>
-            <a href="#" class="button js_remove">Remove Slide</a>
+    </div>
+
+    <div data-option='carousel'
+        data-selector=":not(.o_gallery > .container) > .carousel">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
         </li>
+        <li class="divider"></li>
+        <li data-add_slide="true"> <a href="#">Add Slide</a> </li>
+        <li data-remove_slide="true"> <a href="#" >Remove Slide</a></li>
     </div>
 
-    <div data-snippet-option-id='margin-y'
-        data-selector="section, .row > [class*='col-md-'], .carousel, .parallax, hr">
+    <div data-option='margin-y'
+        data-selector="section, .row > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
     </div>
 
-    <div data-snippet-option-id='resize'
-        data-selector="section, .carousel, .parallax"
-        data-selector-children=".oe_structure, [data-oe-type=html]">
+    <div data-option='resize'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
+        data-drop-in=".oe_structure, [data-oe-type=html]">
     </div>
 
-    <div data-snippet-option-id='margin-x'
+    <div data-option='margin-x'
         data-selector=".row > [class*='col-md-']"
-        data-selector-vertical-children='.row'>
+        data-drop-in-vertical='.row'>
     </div>
 
-    <div data-snippet-option-id='content'
+    <div data-option='content'
         data-selector="blockquote, .well, .panel, .oe_share"
-        data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
-        data-selector-children=".content">
+        data-drop-near="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
+        data-drop-in=".content">
     </div>
 
-    <div data-snippet-option-id='separator'
+    <div data-option='separator'
         data-selector="hr"
-        data-selector-children=".oe_structure, [data-oe-type=html]">
+        data-drop-in=".oe_structure, [data-oe-type=html]">
     </div>
 
-    <div data-snippet-option-id='parallax'
+    <div data-option='parallax'
         data-selector=".parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>
             <ul class="dropdown-menu" name="parallax-scroll">
-                <li data-value="0"><a>Static</a></li>
-                <li data-value="0.3"><a>Very Slow</a></li>
-                <li data-value="0.6"><a>Slow</a></li>
-                <li data-value="1"><a>Fixed</a></li>
-                <li data-value="1.4"><a>Fast</a></li>
-                <li data-value="1.7"><a>Very Fast</a></li>
+                <li data-scroll="0"><a>Static</a></li>
+                <li data-scroll="0.3"><a>Very Slow</a></li>
+                <li data-scroll="0.6"><a>Slow</a></li>
+                <li data-scroll="1"><a>Fixed</a></li>
+                <li data-scroll="1.4"><a>Fast</a></li>
+                <li data-scroll="1.7"><a>Very Fast</a></li>
             </ul>
         </li>
     </div>
 
-    <div data-snippet-option-id='media'
+    <div data-option='media'
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa, .glyphicon">
         <li><a href="#" class="edition">Change...</a></li>
     </div>
 
-    <div data-snippet-option-id='transform'
+    <div data-option='transform'
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
             <ul class="dropdown-menu" name="parallax-scroll">
-                <li data-value="img-rounded"><a>Rounded corners</a></li>
-                <li data-value="img-thumbnail"><a>Box</a></li>
-                <li data-value="img-circle"><a>Circle</a></li>
-                <li data-value="shadow"><a>Shadow</a></li>
-                <li data-value="fa-spin"><a>Spin</a></li>
+                <li data-select_class="img-rounded"><a>Rounded corners</a></li>
+                <li data-select_class="img-thumbnail"><a>Box</a></li>
+                <li data-select_class="img-circle"><a>Circle</a></li>
+                <li data-select_class="shadow"><a>Shadow</a></li>
+                <li data-select_class="fa-spin"><a>Spin</a></li>
             </ul>
         </li>
-        <li><a href="#" class="style">Transform</a></li>
-        <li><a href="#" class="clear-style">Reset Transformation</a></li>
+        <li data-style=""><a>Transform</a></li>
+        <li data-clear_style=""><a>Reset Transformation</a></li>
     </div>
 
 </template>
diff --git a/addons/website/views/themes.xml b/addons/website/views/themes.xml
index e5309519ea2..4429640e79e 100644
--- a/addons/website/views/themes.xml
+++ b/addons/website/views/themes.xml
@@ -2,6 +2,162 @@
 <openerp>
 <data>
 
+
+<!--
+    Customize Themes
+
+    Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
+    'data-xmlid' (optional) xml id of the template to add if the input is checked.
+        You can set a list of xml id separate by comma (all template is enable or 
+        disable in same time)
+    'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
+    'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
+    'data-reload="/"' (optional) force the reloading of the page if the url match with
+        the string ( = regexp).
+        Otherwise, only the '/web/css/website.assets_frontend' is reloaded
+
+    For the sets (data-enable and/or data-disable without data-xmlid), the set is
+    automatically checked if:
+    - all related fields are enabled for data-enable
+    - all related fields are disabled for data-disable
+    else unchecked
+    
+    HTML apply classes:
+    - 'checked': on the parent label when input is checked
+    - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together 
+       out is added)
+    - 'out': on the container 1 second before removed from ths DOM
+    - 'loading': on the container/modal when the new css is loading
+-->
+
+<template id="website.theme_customize" name="Theme Modal for Customization">
+  <div id="theme_customize_modal" class="modal fade">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <input id="less" data-xmlid="website.option_bootstrap_less" style="display: none;"/>
+
+              <div class="loading_backdrop"></div>
+              <div class="modal-header">
+                  <button type="button" class="close">×</button>
+                  <h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
+              </div>
+              <div class="modal-body">
+                  <h5 class="modal-h5">LAYOUT</h5>
+                  <table name="layout">
+                      <tr>
+                          <td class=" text-center" width="50%">
+                              <label class=" center-block">
+                                  <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
+                                  <input name="layoutvar" type="radio" data-xmlid=""/>
+                              </label>                                 
+                          </td>
+                          <td class=" text-center">
+                              <label class=" center-block">
+                                 <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
+                                  <input name="layoutvar" type="radio" data-xmlid="website.option_layout_boxed" data-enable="less"/>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+
+                  <h5 class="modal-h5">MAIN COLOR</h5>
+                  <table name="color">
+                      <tr>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="" data-disable="less"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_emerald" data-enable="less"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_cobalt" data-enable="less"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_amethyst" data-enable="less"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_ruby" data-enable="less"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/website/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_gold" data-enable="less"/>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+
+                  <h5 class="modal-h5">FONTS COMBINATIONS</h5>
+                  <table name="font">
+                      <tr>
+                          <td width="50%">
+                              <label>
+                                  <div>
+                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
+                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
+                                  </div>
+                                  <input name="theme" type="radio" data-xmlid=""/>
+                              </label>
+                          </td>
+                          <td width="50%">
+                              <label>
+                                  <div>
+                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
+                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
+                                    <input name="theme" type="radio" data-xmlid="website.option_font" data-enable="less"/>
+                                  </div>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- color-picker -->
+<!-- HTML class to hide option for one mode : only-text, only-bg -->
+
+<template id="website.colorpicker" name="Color-Picker">
+    <table class="colorpicker">
+        <tr>
+            <td><button class="automatic-color" title="Automatic Color"/></td>
+            <td><button class="bg-primary" title="Primary Color"/></td>
+            <td><button class="bg-success" title="Success Color"/></td>
+            <td><button class="bg-info" title="Info Color"/></td>
+            <td><button class="bg-warning" title="Warning Color"/></td>
+            <td><button class="bg-danger" title="Danger Color"/></td>
+        </tr>
+        <tr><td colspan="8"><hr style="width: 100%; height: 1px;"/></td></tr>
+        <tr>
+            <td><button class="bg-blue"/></td>
+            <td><button class="bg-turquoise"/></td>
+            <td><button class="bg-green"/></td>
+            <td><button class="bg-yellow"/></td>
+            <td><button class="bg-red"/></td>
+            <td><button class="bg-pink"/></td>
+            <td><button class="bg-purple"/></td>
+            <td><button class="bg-brown"/></td>
+        </tr>
+    </table>
+</template>
+
 <!--
      Theme
 -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 7e5d03bd6f9..00e412b5948 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -15,7 +15,7 @@
 
     <script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
     <script type="text/javascript" src="/web/static/lib/bootstrap/js/bootstrap.js"></script>
-
+    
 </template>
 
 <template id="assets_backend" name="website assets for backend" inherit_id="web.assets_backend">
@@ -208,6 +208,7 @@
     <script type="text/javascript" src="/website/static/src/js/website.tour.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.tour.banner.js"></script> <!-- groups="base.group_website_designer" -->
     <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
+    <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js" />
     <script type="text/javascript" src="/website/static/src/js/website.ace.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.translator.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.theme.js"></script>
@@ -236,7 +237,7 @@
 <template id="footer_custom" inherit_id="website.layout" name="Footer">
     <xpath expr="//div[@id='footer_container']" position="replace">
         <div class="oe_structure" id="footer">
-            <section data-snippet-id='three-columns' class="mt16 mb16">
+            <section data-option='three-columns' class="mt16 mb16">
                 <div class="container">
                     <div class="row">
                         <div class="col-md-4">
@@ -762,7 +763,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
         <div id="wrap">
             <div class="oe_structure">
 
-                <section data-snippet-id="title">
+                <section>
                     <div class="container">
                         <div class="row">
                             <div class="col-md-12">
@@ -773,7 +774,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                     </div>
                 </section>
 
-                <section data-snippet-id="text-image">
+                <section>
                     <div class="container">
                         <div class="row">
                             <div class="col-md-6 mt32">
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 39699f677f4..8b1848dd0e8 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -46,7 +46,7 @@
                     <t t-set="classname">pull-right</t>
                 </t>
             </section>
-            <section data-snippet-id="title" class="container">
+            <section class="container">
                 <div class="row">
                     <div class="col-md-12 text-center">
                         <h1>Latest Posts</h1>
diff --git a/addons/website_customer/views/website_customer.xml b/addons/website_customer/views/website_customer.xml
index db64eb916f4..2a92d78a917 100644
--- a/addons/website_customer/views/website_customer.xml
+++ b/addons/website_customer/views/website_customer.xml
@@ -13,7 +13,7 @@
     <t t-call="website.layout">
         <div id="wrap">
             <div class="oe_structure">
-                <section data-snippet-id="title">
+                <section>
                     <h1 class="text-center">
                         Our References
                     </h1><h2 class="text-center text-muted">
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index f84e3dbe133..729fcb39d5e 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -10,7 +10,7 @@
             <field name="website_published">True</field>
             <field name="twitter_hashtag">openerp</field>
             <field name="description"><![CDATA[
-<div class="carousel slide oe_small mb16" data-interval="10000" data-snippet-id="carousel" id="myCarousel3">
+<div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
 <div class="carousel-inner">
 <div class="item active image_text"><img height="100%" src="/website/static/src/img/banner/orange_red.jpg" width="100%"><div class="container">
 <div class="carousel-caption content">
@@ -26,11 +26,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb8 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb8 mt0">
 <h2>Course Summary</h2>
 </div>
 
-<div class="col-md-12 mt16 mb0" data-snippet-id="colmd">
+<div class="col-md-12 mt16 mb0">
 <p><span style="text-align: -webkit-center; ">This course is dedicated to&nbsp;developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
 </div>
 </div>
@@ -38,11 +38,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mt0 mb16" data-snippet-id="colmd">
+<div class="col-md-12 text-center mt0 mb16">
 <h2>What you will learn?</h2>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 1</h2>
@@ -62,7 +62,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 2</h2>
@@ -83,7 +83,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 3</h2>
@@ -108,11 +108,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb16 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb16 mt0">
 <h2>Requirements</h2>
 </div>
 
-<div class="col-md-12 mb16 mt16" data-snippet-id="colmd">
+<div class="col-md-12 mb16 mt16">
 <p><strong>Objectives:</strong></p>
 
 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -144,20 +144,20 @@
 
 <div class="container oe_dark">
 <div class="row">
-<div class="col-md-12" data-snippet-id="colmd">
+<div class="col-md-12">
 <h1 class="text-center">Read Great Contents</h1>
 
 <h3 class="text-muted text-center">What do people&nbsp;say about this course?</h3>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>I did not expect such a great learning experience. I feel like I can develop anything now.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>This course help me build my first application within a month. Definetly worth its price.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
@@ -172,7 +172,7 @@
             <field name="website_published">True</field>
             <field name="twitter_hashtag">openerp</field>
             <field name="description"><![CDATA[
-<div class="carousel slide oe_small mb16" data-interval="10000" data-snippet-id="carousel" id="myCarousel3">
+<div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
 <div class="carousel-inner">
 <div class="item active image_text"><img height="100%" src="/website/static/src/img/banner/orange_red.jpg" width="100%"><div class="container">
 <div class="carousel-caption content">
@@ -188,11 +188,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb8 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb8 mt0">
 <h2>Course Summary</h2>
 </div>
 
-<div class="col-md-12 mt16 mb0" data-snippet-id="colmd">
+<div class="col-md-12 mt16 mb0">
 <p><span style="text-align: -webkit-center; ">This course is dedicated to&nbsp;developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
 </div>
 </div>
@@ -200,11 +200,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mt0 mb16" data-snippet-id="colmd">
+<div class="col-md-12 text-center mt0 mb16">
 <h2>What you will learn?</h2>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 1</h2>
@@ -224,7 +224,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 2</h2>
@@ -245,7 +245,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 3</h2>
@@ -270,11 +270,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb16 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb16 mt0">
 <h2>Requirements</h2>
 </div>
 
-<div class="col-md-12 mb16 mt16" data-snippet-id="colmd">
+<div class="col-md-12 mb16 mt16">
 <p><strong>Objectives:</strong></p>
 
 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -306,20 +306,20 @@
 
 <div class="container oe_dark">
 <div class="row">
-<div class="col-md-12" data-snippet-id="colmd">
+<div class="col-md-12">
 <h1 class="text-center">Read Great Contents</h1>
 
 <h3 class="text-muted text-center">What do people&nbsp;say about this course?</h3>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>I did not expect such a great learning experience. I feel like I can develop anything now.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>This course help me build my first application within a month. Definetly worth its price.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
@@ -346,7 +346,7 @@
             <field name="website_published">True</field>
             <field name="twitter_hashtag">openerp</field>
             <field name="description"><![CDATA[
-<div class="carousel slide oe_small mb16" data-interval="10000" data-snippet-id="carousel" id="myCarousel3">
+<div class="carousel slide oe_small mb16" data-interval="10000" id="myCarousel3">
 <div class="carousel-inner">
 <div class="item active image_text"><img height="100%" src="/website/static/src/img/banner/orange_red.jpg" width="100%"><div class="container">
 <div class="carousel-caption content">
@@ -363,11 +363,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb8 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb8 mt0">
 <h2>Course Summary</h2>
 </div>
 
-<div class="col-md-12 mt16 mb0" data-snippet-id="colmd">
+<div class="col-md-12 mt16 mb0">
 <p><span style="text-align: -webkit-center; ">This course is dedicated to&nbsp;developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
 </div>
 </div>
@@ -375,11 +375,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mt0 mb16" data-snippet-id="colmd">
+<div class="col-md-12 text-center mt0 mb16">
 <h2>What you will learn?</h2>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 1</h2>
@@ -399,7 +399,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 2</h2>
@@ -420,7 +420,7 @@
 </div>
 </div>
 
-<div class="col-md-4" data-snippet-id="colmd">
+<div class="col-md-4">
 <div class="panel panel-info">
 <div class="panel-heading text-center">
 <h2 style="margin: 0">Day 3</h2>
@@ -445,11 +445,11 @@
 
 <div class="container">
 <div class="row">
-<div class="col-md-12 text-center mb16 mt0" data-snippet-id="colmd">
+<div class="col-md-12 text-center mb16 mt0">
 <h2>Requirements</h2>
 </div>
 
-<div class="col-md-12 mb16 mt16" data-snippet-id="colmd">
+<div class="col-md-12 mb16 mt16">
 <p><strong>Objectives:</strong></p>
 
 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -481,20 +481,20 @@
 
 <div class="container oe_dark">
 <div class="row">
-<div class="col-md-12" data-snippet-id="colmd">
+<div class="col-md-12">
 <h1 class="text-center">Read Great Contents</h1>
 
 <h3 class="text-muted text-center">What do people&nbsp;say about this course?</h3>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>I did not expect such a great learning experience. I feel like I can develop anything now.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
 
-<div class="mt16 mb32 col-md-6" data-snippet-id="colmd">
-<blockquote data-snippet-id="quote">
+<div class="mt16 mb32 col-md-6">
+<blockquote>
 <p>This course help me build my first application within a month. Definetly worth its price.</p>
 <small>John Doe, CEO</small></blockquote>
 </div>
diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index 574ef8008af..c13fe18b0ef 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -229,7 +229,7 @@
 
 <template id="template_location">
     <t t-call="website_event.layout">
-        <section class="container" data-snippet-id="title">
+        <section class="container">
             <h1 class="text-center">Event Location</h1>
         </section>
         <div class="oe_structure oe_empty"/>
@@ -238,7 +238,7 @@
 
 <template id="template_intro">
     <t t-call="website_event.layout">
-        <section class="container" data-snippet-id="title">
+        <section class="container">
             <h1 class="text-center">Event Introduction</h1>
         </section>
         <div class="oe_structure oe_empty"/>
@@ -382,7 +382,7 @@
         </div>
     </xpath>
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-snippet-option-id='country_events'
+        <div data-option='country_events'
             data-selector=".oe_country_events"
             data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
             data-selector-children=".content"
diff --git a/addons/website_event_track/controllers/event.py b/addons/website_event_track/controllers/event.py
index f2d5af47e36..7a58ca86427 100644
--- a/addons/website_event_track/controllers/event.py
+++ b/addons/website_event_track/controllers/event.py
@@ -151,7 +151,7 @@ class website_event(http.Controller):
                 tags.append(tag.id)
 
         e = openerp.tools.escape
-        track_description = '''<section data-snippet-id="text-block">
+        track_description = '''<section data-option="text-block">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
diff --git a/addons/website_event_track/views/website_event.xml b/addons/website_event_track/views/website_event.xml
index b9ccee04035..91e4a6f8f6d 100644
--- a/addons/website_event_track/views/website_event.xml
+++ b/addons/website_event_track/views/website_event.xml
@@ -11,7 +11,7 @@
 <template name="Sponsors" id="event_sponsor" optional="enabled" inherit_id="website_event.layout">
     <xpath expr="//div[@id='wrap']" position="inside">
         <div class="container mt32 mb16 hidden-print" t-if="event.sponsor_ids">
-            <section data-snippet-id="title">
+            <section>
                 <h2 class="text-center mb32">Our Sponsors</h2>
             </section>
             <div class="row">
@@ -267,7 +267,7 @@
     <t t-call="website_event.layout">
         <div class="oe_structure"/>
         <div class="container">
-            <section data-snippet-id="title">
+            <section>
                 <h1 class="text-center mb0">Call for Proposals</h1>
                 <h2 class="text-center text-muted mb32" t-esc="event.name"></h2>
             </section>
@@ -280,7 +280,7 @@
             <section class="row">
                 <div class="col-md-8">
                     <div class="oe_structure">
-                        <section data-snippet-id="text">
+                        <section>
                             <h3 class="page-header mt16">
                                 Introduction
                             </h3>
@@ -294,7 +294,7 @@
                                 inclusion in the programme.
                             </p>
                         </section>
-                        <section data-snippet-id="text">
+                        <section>
                             <h3 class="page-header">Application</h3>
                             <p>
                                 Fill this form to propose your talk.
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 9f5433ee07c..962f468b2f9 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -5,7 +5,7 @@
     <record id="hr.job_marketing" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -15,7 +15,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -92,7 +92,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -107,7 +107,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -137,7 +137,7 @@
     <record id="hr.job_developer" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -146,7 +146,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -225,7 +225,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -240,7 +240,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -270,7 +270,7 @@
     <record id="hr.job_consultant" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -279,7 +279,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -359,7 +359,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -374,7 +374,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -403,7 +403,7 @@
 
     <record id="hr.job_ceo" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -413,7 +413,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -488,7 +488,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -503,7 +503,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -532,7 +532,7 @@
 
     <record id="hr.job_cto" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -541,7 +541,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -616,7 +616,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -631,7 +631,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -660,7 +660,7 @@
 
     <record id="hr.job_trainee" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -669,7 +669,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16">
@@ -744,7 +744,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -759,7 +759,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -788,7 +788,7 @@
 
     <record id="hr.job_hrm" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
+<section class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
@@ -798,7 +798,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="pricing" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-4 mt16" style="width:30%;">
@@ -873,7 +873,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
@@ -888,7 +888,7 @@
         </div>
     </div>
 </section>
-<section data-snippet-id="image-text" class="mt16 mb16">
+<section class="mt16 mb16">
     <div class="container">
         <div class="row">
             <div class="col-md-12 text-center">
diff --git a/addons/website_hr_recruitment/views/templates.xml b/addons/website_hr_recruitment/views/templates.xml
index a1e21880612..b73f83f8f84 100644
--- a/addons/website_hr_recruitment/views/templates.xml
+++ b/addons/website_hr_recruitment/views/templates.xml
@@ -12,14 +12,14 @@
     <t t-call="website.layout">
         <div id="wrap">
             <div class="oe_structure">
-                <section data-snippet-id="text-block" class="mb16">
+                <section class="mb16">
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb16" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mb16">
                                 <h2>Our Job Offers</h2>
                                 <h3 class="text-muted">Join us and help disrupt the enterprise market!</h3>
                             </div>
-                            <div class="col-md-12" data-snippet-id="colmd">
+                            <div class="col-md-12">
                                 <p>
                                     With a small team of smart people, we released the most
                                     disruptive enterprise management software in the world.
@@ -123,7 +123,7 @@
         <div t-field="job.website_description"/>
 
         <div class="oe_structure">
-            <section data-snippet-id="cta" class="mt16 mb16">
+            <section class="mt16 mb16">
                 <div class="container">
                     <div class="row">
                         <div class="col-md-12 text-center mt16 mb16">
@@ -210,7 +210,7 @@
                         we will get back to you soon.
                     </p>
                 </div>
-                <section data-snippet-id="cta" class="oe_dark">
+                <section class="oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-12 text-center mt16 mb16">
diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index 5e62191d853..04dcf0f72e3 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -481,7 +481,7 @@
 </div>
 
 <div id="snippet_options" class="hidden">
-    <div data-snippet-option-id='content'
+    <div data-option='content'
         data-selector="[data-oe-field='body_html'] > div, .oe_snippet_body"
         data-selector-siblings="[data-oe-field='body_html'] > *"
         data-selector-children="[data-oe-field='body_html']">
diff --git a/addons/website_mail_group/static/src/js/website_mail_group.editor.js b/addons/website_mail_group/static/src/js/website_mail_group.editor.js
index fdfb948121f..420afb736af 100644
--- a/addons/website_mail_group/static/src/js/website_mail_group.editor.js
+++ b/addons/website_mail_group/static/src/js/website_mail_group.editor.js
@@ -5,8 +5,9 @@
     var _t = openerp._t;
 
     website.snippet.options.subscribe = website.snippet.Option.extend({
-        on_prompt: function () {
+        choose_mailing_list: function (type, value) {
             var self = this;
+            if (type !== "click") return;
             return website.prompt({
                 id: "editor_new_subscribe_button",
                 window_title: _t("Add a Subscribe Button"),
@@ -22,15 +23,10 @@
         drop_and_build_snippet: function() {
             var self = this;
             this._super();
-            this.on_prompt().fail(function () {
+            this.choose_mailing_list("click").fail(function () {
                 self.editor.on_remove();
             });
         },
-        start : function () {
-            var self = this;
-            this.$el.find(".js_mailing_list").on("click", _.bind(this.on_prompt, this));
-            this._super();
-        },
         clean_for_save: function () {
             this.$target.addClass("hidden");
         },
diff --git a/addons/website_mail_group/views/snippets.xml b/addons/website_mail_group/views/snippets.xml
index 95935cd4998..8bdcb52e971 100644
--- a/addons/website_mail_group/views/snippets.xml
+++ b/addons/website_mail_group/views/snippets.xml
@@ -37,13 +37,11 @@
 
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-snippet-option-id='subscribe'
+        <div data-option='subscribe'
             data-selector=".js_follow_alias"
             data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
            >
-            <li>
-                <a href="#" class="button js_mailing_list">Change Discussion List</a>
-            </li>
+            <li data-choose_mailing_list=""><a>Change Discussion List</a></li>
         </div>
     </xpath>
 
diff --git a/addons/website_membership/views/website_membership.xml b/addons/website_membership/views/website_membership.xml
index c7145e6be79..c7dcfbf4570 100644
--- a/addons/website_membership/views/website_membership.xml
+++ b/addons/website_membership/views/website_membership.xml
@@ -14,7 +14,7 @@
         <t t-set="additional_title">Members</t>
         <div id="wrap">
             <div class="oe_structure">
-                <section data-snippet-id="title">
+                <section>
                     <div class="container">
                         <div class="row">
                             <div class="col-md-12">
diff --git a/addons/website_quote/data/website_quotation_demo.xml b/addons/website_quote/data/website_quotation_demo.xml
index cdc0e589fa9..4038fcd926e 100644
--- a/addons/website_quote/data/website_quotation_demo.xml
+++ b/addons/website_quote/data/website_quotation_demo.xml
@@ -54,10 +54,10 @@
             <field name="number_of_days">45</field>
             <field name="website_description" type="xml">
 
-                <section data-snippet-id="title">
+                <section>
                     <h1 class="page-header">Our Partnership Offer</h1>
                 </section>
-                <section data-snippet-id="text-block">
+                <section>
                     <div class="row">
                         <div class="col-md-12">
                             <p>
@@ -78,7 +78,7 @@
                     </div>
                 </section>
 
-                <section data-snippet-id="pricing">
+                <section>
                     <div class="row mt32">
                         <div class="col-md-4">
                             <div class="panel panel-info">
@@ -133,7 +133,7 @@
                     </div>
                 </section>
 
-                <section data-snippet-id="text-block">
+                <section>
                     <h2>A Dedicated Account Manager</h2>
                     <p>
                         We will assign you a dedicated account manager, an
@@ -145,7 +145,7 @@
                     </p>
                 </section>
 
-                <section data-snippet-id="text-block">
+                <section>
                     <div class="row">
                         <div class="col-md-12">
                             <h2>Get access to our experts</h2>
@@ -165,7 +165,7 @@
                     </div>
                 </section>
 
-                <section data-snippet-id="text-block">
+                <section>
                     <div class="row">
                         <div class="col-md-12">
                             <h2>Official certified partner</h2>
@@ -186,7 +186,7 @@
                     </div>
                 </section>
 
-                <section data-snippet-id="text-block">
+                <section>
                     <div class="row">
                         <div class="col-md-12">
                             <h2>Access to the Lead</h2>
@@ -207,8 +207,8 @@
                     </div>
                 </section>
 
-                <section data-snippet-id="text-block">
-                    <h2>Benefit from the Odoo branding</h2>
+                <section>
+                    <h2>Benefit from the OpenERP branding</h2>
                     <p>
                         Every year, we redirect more than 100,000 customer
                         requests to our official partners. These are prospects
@@ -219,7 +219,7 @@
                     </p>
                 </section>
 
-                <section class="mb32" data-snippet-id="text-block">
+                <section class="mb32">
                     <h2>Test developments automatically</h2>
                     <div class="row">
                         <div class="col-md-5">
@@ -254,10 +254,10 @@
             <field name="price_unit">12950.00</field>
             <field name="discount">10.00</field>
             <field name="website_description" type="html">
-                <section data-snippet-id="title">
+                <section>
                     <h1>Online Training + Certification</h1>
                 </section>
-                <section data-snippet-id="text-image">
+                <section>
                     <div class="row">
                         <div class="col-md-12 mb32">
                             <p>These courses feature the same high quality course content found in our traditional classroom trainings, supplemented with modular sessions and cloud-based labs. Many of our online learning courses also include dozens of recorded webinars and live sessions by our senior instructors. At the end of the training, you can pass the Odoo Certification exam in one of the 5000+ Pearson VUE test centers worldwide.</p>
@@ -298,26 +298,26 @@
             <field name="product_uom_id" ref="product.product_uom_unit"/>
             <field name="price_unit">00.00</field>
             <field name="website_description" type="html">
-                <section data-snippet-id="title">
+                <section>
                     <h1>Technical Training</h1>
                 </section>
-                <section id="whatsuit" data-snippet-id="text-block">
+                <section id="whatsuit">
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb8 mt0" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mb8 mt0">
                                 <h2>Course Summary</h2>
                             </div>
-                            <div class="col-md-12 mt16 mb0" data-snippet-id="colmd">
+                            <div class="col-md-12 mt16 mb0">
                                 <p><span style="text-align: -webkit-center; ">This course is dedicated to developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mt0 mb16" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mt0 mb16">
                                 <h2>What you will learn?</h2>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 1</h3>
@@ -336,7 +336,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 2</h3>
@@ -357,7 +357,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 3</h3>
@@ -383,11 +383,11 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb16 mt0" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mb16 mt0">
                                 <h2>Requirements</h2>
                             </div>
 
-                            <div class="col-md-12 mb16 mt16" data-snippet-id="colmd">
+                            <div class="col-md-12 mb16 mt16">
                                 <p><strong>Objectives:</strong></p>
 
                                 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -427,16 +427,16 @@
             <field name="price_unit">9000.00</field>
             <field name="discount">10</field>
             <field name="website_description" type="html">
-                <section data-snippet-id="title">
+                <section>
                     <h1>Advanced CRM Functional</h1>
                 </section>
-                <section data-snippet-id="text-image">
+                <section>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb8 mt0" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mb8 mt0">
                                 <h2>Objectives</h2>
                             </div>
-                            <div class="col-md-12 mt16 mb0" data-snippet-id="colmd">
+                            <div class="col-md-12 mt16 mb0">
                                 <p><span style="text-align: -webkit-center; ">Upon completion of the training, the participant will be able to:</span></p>
                                 <ul class="list-group">
                                     <li class="list-group-item"> Install and administer Odoo.</li>
@@ -453,10 +453,10 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mt0 mb16" data-snippet-id="colmd">
+                            <div class="col-md-12 text-center mt0 mb16">
                                 <h2>What you will learn?</h2>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 1</h3>
@@ -472,7 +472,7 @@
                                     </ul>
                                 </div>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 2</h3>
@@ -488,7 +488,7 @@
                                     </ul>
                                 </div>
                             </div>
-                            <div class="col-md-4" data-snippet-id="colmd">
+                            <div class="col-md-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 3</h3>
@@ -508,7 +508,7 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 mb16 mt16" data-snippet-id="colmd">
+                            <div class="col-md-12 mb16 mt16">
                                 <h2>Requirements</h2>
 
                                 <ul><li>Bring your own laptop.</li>
diff --git a/addons/website_quote/views/website_quotation.xml b/addons/website_quote/views/website_quotation.xml
index a23f087080b..4ce720e6060 100644
--- a/addons/website_quote/views/website_quotation.xml
+++ b/addons/website_quote/views/website_quotation.xml
@@ -2,7 +2,7 @@
 <openerp>
 <data>
   <template id="pricing" name="Price">
-      <section data-snippet-id="title">
+      <section>
           <h1 class="page-header">Pricing</h1>
       </section>
       <section id="quote">
@@ -404,7 +404,7 @@
 
   <template id="optional_products">
     <div class="container mt32" t-if="option">
-        <section data-snippet-id="title">
+        <section>
             <h1 class="page-header">Options</h1>
         </section>
         <section id="options">
diff --git a/addons/website_sale/__openerp__.py b/addons/website_sale/__openerp__.py
index 68556cd8081..b4e1f2669b2 100644
--- a/addons/website_sale/__openerp__.py
+++ b/addons/website_sale/__openerp__.py
@@ -16,6 +16,7 @@ OpenERP E-Commerce
         'views/templates.xml',
         'views/payment.xml',
         'views/sale_order.xml',
+        'views/snippets.xml',
         'security/ir.model.access.csv',
         'security/website_sale.xml',
     ],
diff --git a/addons/website_sale/data/demo.xml b/addons/website_sale/data/demo.xml
index 952497bd547..d5ab0362df2 100644
--- a/addons/website_sale/data/demo.xml
+++ b/addons/website_sale/data/demo.xml
@@ -17,7 +17,7 @@
             <field name="website_sequence">5</field>
             <field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_full')])]"/>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
+                <section class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -37,7 +37,7 @@
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16">
+                <section class="mt16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1">
@@ -65,7 +65,7 @@
             <field name="website_size_x">2</field>
             <field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_promo')])]"/>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt32">
@@ -77,7 +77,7 @@
                                     experience music just about anywhere.
                                 </p>
 
-                                <div class="panel panel-default mt48" data-snippet-id="panel">
+                                <div class="panel panel-default mt48">
                                     <div class="panel-heading">
                                         <h3 class="panel-title">Characteristics</h3>
                                     </div>
@@ -101,7 +101,7 @@
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
+                <section class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt16">
@@ -135,7 +135,7 @@
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt32 mb16">
@@ -179,7 +179,7 @@ Ultrafast wireless
 iOS7
             </field>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mb16 oe_dark">
+                <section class="mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -198,7 +198,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16">
+                <section class="mt16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1">
@@ -217,7 +217,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mb16 oe_dark">
+                <section class="mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt32">
@@ -236,7 +236,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1">
@@ -255,7 +255,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
+                <section class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -290,7 +290,7 @@ Cable length: 1065 mm
 Weight: 0.4 ounce
             </field>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mt32">
+                <section class="mt32">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-8 col-md-offset-2 text-center">
@@ -346,7 +346,7 @@ Weight: 0.4 ounce
                 Intel Iris Pro graphics
             </field>
             <field name="website_description" type="html">
-                <section data-snippet-id="image-text">
+                <section>
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 mt32 col-md-offset-1">
@@ -362,7 +362,7 @@ Weight: 0.4 ounce
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mb16 oe_dark">
+                <section class="mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="text-center col-md-8 col-md-offset-2 mt16">
@@ -378,7 +378,7 @@ Weight: 0.4 ounce
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -418,7 +418,7 @@ Weight: 0.4 ounce
             </field>
             <field name="website_description" type="html">
                 <hr/>
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-10 col-md-offset-1 mt32 mb32">
@@ -445,7 +445,7 @@ Width:  1.56 inches
 Depth:  0.21 inch
 Weight: 1.1 ounces</field>
             <field name="website_description" type="html">
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-9 col-md-offset-1 mb16">
@@ -454,7 +454,7 @@ Weight: 1.1 ounces</field>
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
+                <section class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -475,7 +475,7 @@ Weight: 1.1 ounces</field>
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-10 col-md-offset-1">
@@ -505,7 +505,7 @@ Weight: 1.1 ounces</field>
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="image-text" class="mt16 mb16">
+                <section class="mt16 mb16">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-12 text-center mb16">
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 40ce13f0d09..ce978eb3984 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- Default Styles ---- */
 .oe_product {
   border: 1px solid rgba(100, 100, 100, 0.2);
@@ -341,21 +342,10 @@ label.css_attribute_color.css_not_available {
 }
 
 /* ---- Publish managment and options ---- */
-#products_grid .css_options {
-  display: none;
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  z-index: 10;
-}
-#products_grid .css_options .dropdown {
-  position: relative;
-  left: -50%;
-}
-#products_grid .css_options .dropdown [name="size"] table {
+.oe_overlay_options .dropdown ul[name="size"] table {
   margin-left: 20px;
 }
-#products_grid .css_options .dropdown [name="size"] td {
+.oe_overlay_options .dropdown ul[name="size"] td {
   margin: 0;
   padding: 0;
   width: 20px;
@@ -363,20 +353,16 @@ label.css_attribute_color.css_not_available {
   border: 1px #dddddd solid;
   cursor: pointer;
 }
-#products_grid .css_options .dropdown [name="size"] td.selected {
+.oe_overlay_options .dropdown ul[name="size"] td.selected {
   background-color: #b1d4f1;
 }
-#products_grid .css_options .dropdown [name="size"] table.oe_hover td.selected {
+.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.selected {
   background-color: transparent;
 }
-#products_grid .css_options .dropdown [name="size"] table.oe_hover td.select {
+.oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.select {
   background-color: #b1d4f1;
 }
 
-.cke_editable #products_grid .oe_product_cart:hover > .css_options {
-  display: block;
-}
-
 /* Wizard */
 ul.wizard {
   padding: 0;
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index d3a6b1943bc..d4804597127 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -289,16 +289,9 @@ label.css_attribute_color.css_not_available
 
 /* ---- Publish managment and options ---- */
 
-#products_grid .css_options
-    display: none
-    position: absolute
-    top: -6px
-    left: 50%
-    z-index: 10
+.oe_overlay_options
     .dropdown
-        position: relative
-        left: -50%
-        [name="size"]
+        ul[name="size"]
             table
                 margin-left: 20px
             td
@@ -315,10 +308,6 @@ label.css_attribute_color.css_not_available
             table.oe_hover td.select
                 background-color: #B1D4F1
 
-.cke_editable
-    #products_grid .oe_product_cart:hover > .css_options
-        display: block
-
 /* Wizard */
 
 
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 66dea2bd3dd..5de5b899095 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -18,68 +18,83 @@
         },
     });
 
-    function reload_enable_editor() {
-        var search = location.search.replace(/\?|$/, '?enable_editor=1&');
-        location.href = location.href.replace(/(\?|#|$).*/, search + location.hash);
-    }
+    website.snippet.options.website_sale = website.snippet.Option.extend({
+        start: function () {
+            var self = this;
+            this.product_tmpl_id = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
 
-    $(document).on('click', '.js_options .js_go_to_top,.js_options .js_go_to_bottom,.js_options .js_go_up,.js_options .js_go_down', function (event) {
-        var $a = $(event.currentTarget);
-        var $data = $a.parents(".js_options:first");
-        var sequence = "top";
-        if ($a.hasClass('js_go_to_bottom'))
-            sequence = "bottom";
-        else if ($a.hasClass('js_go_up'))
-            sequence = "up";
-        else if ($a.hasClass('js_go_down'))
-            sequence = "down";
-        openerp.jsonRpc('/shop/change_sequence', 'call', {'id': $data.data('id'), 'sequence': sequence})
-            .then(reload_enable_editor);
-    });
+            var size_x = parseInt(this.$target.attr("colspan") || 1);
+            var size_y = parseInt(this.$target.attr("rowspan") || 1);
 
-    $(document).on('click', '.js_options ul[name="style"] a', function (event) {
-        var $a = $(event.currentTarget);
-        var $li = $a.parent();
-        var $data = $a.parents(".js_options:first");
-        var $product = $a.parents(".oe_product:first");
+            var $size = this.$el.find('ul[name="size"]');
+            var $select = $size.find('tr:eq(0) td:lt('+size_x+')');
+            if (size_y >= 2) $select = $select.add($size.find('tr:eq(1) td:lt('+size_x+')'));
+            if (size_y >= 3) $select = $select.add($size.find('tr:eq(2) td:lt('+size_x+')'));
+            if (size_y >= 4) $select = $select.add($size.find('tr:eq(3) td:lt('+size_x+')'));
+            $select.addClass("selected");
 
-        $li.parent().removeClass("active");
-        openerp.jsonRpc('/shop/change_styles', 'call', {'id': $data.data('id'), 'style_id': $a.data("id")})
-            .then(function (result) {
-                $product.toggleClass($a.data("class"));
-                $li.toggleClass("active", result);
-            });
-    });
+            website.session.model('product.style')
+                .call('search_read', [[]])
+                    .then(function (data) {
+                        var $ul = self.$el.find('ul[name="style"]');
+                        for (var k in data) {
+                            $ul.append(
+                                $('<li data-style="'+data[k]['id']+'" data-check_class="'+data[k]['html_class']+'"/>')
+                                    .append( $('<a/>').text(data[k]['name']) ));
+                        }
+                    });
 
-    $(document).on('mouseenter', '#products_grid .js_options ul[name="size"] table', function (event) {
-        $(event.currentTarget).addClass("oe_hover");
-    });
-    $(document).on('mouseleave', '#products_grid .js_options ul[name="size"] table', function (event) {
-        $(event.currentTarget).removeClass("oe_hover");
-    });
-    $(document).on('mouseover', '#products_grid .js_options ul[name="size"] td', function (event) {
-        var $td = $(event.currentTarget);
-        var $table = $td.parents("table:first");
-        var x = $td.index()+1;
-        var y = $td.parent().index()+1;
+            this.bind_resize();
+        },
+        reload: function () {
+            if (location.href.match(/\?enable_editor/)) {
+                location.reload();
+            } else {
+                location.href = location.href.replace(/\?(enable_editor=1&)?|#.*|$/, '?enable_editor=1&');
+            }
+        },
+        bind_resize: function () {
+            var self = this;
+            this.$el.on('mouseenter', 'ul[name="size"] table', function (event) {
+                $(event.currentTarget).addClass("oe_hover");
+            });
+            this.$el.on('mouseleave', 'ul[name="size"] table', function (event) {
+                $(event.currentTarget).removeClass("oe_hover");
+            });
+            this.$el.on('mouseover', 'ul[name="size"] td', function (event) {
+                var $td = $(event.currentTarget);
+                var $table = $td.closest("table");
+                var x = $td.index()+1;
+                var y = $td.parent().index()+1;
 
-        var tr = [];
-        for (var yi=0; yi<y; yi++) tr.push("tr:eq("+yi+")");
-        var $select_tr = $table.find(tr.join(","));
-        var td = [];
-        for (var xi=0; xi<x; xi++) td.push("td:eq("+xi+")");
-        var $select_td = $select_tr.find(td.join(","));
+                var tr = [];
+                for (var yi=0; yi<y; yi++) tr.push("tr:eq("+yi+")");
+                var $select_tr = $table.find(tr.join(","));
+                var td = [];
+                for (var xi=0; xi<x; xi++) td.push("td:eq("+xi+")");
+                var $select_td = $select_tr.find(td.join(","));
 
-        $table.find("td").removeClass("select");
-        $select_td.addClass("select");
-    });
-    $(document).on('click', '#products_grid .js_options ul[name="size"] td', function (event) {
-        var $td = $(event.currentTarget);
-        var $data = $td.parents(".js_options:first");
-        var x = $td.index()+1;
-        var y = $td.parent().index()+1;
-        openerp.jsonRpc('/shop/change_size', 'call', {'id': $data.data('id'), 'x': x, 'y': y})
-            .then(reload_enable_editor);
+                $table.find("td").removeClass("select");
+                $select_td.addClass("select");
+            });
+            this.$el.on('click', 'ul[name="size"] td', function (event) {
+                var $td = $(event.currentTarget);
+                var $data = $td.closest(".js_options:first");
+                var x = $td.index()+1;
+                var y = $td.parent().index()+1;
+                openerp.jsonRpc('/shop/change_size', 'call', {'id': self.product_tmpl_id, 'x': x, 'y': y})
+                    .then(self.reload);
+            });
+        },
+        style: function (type, value, $li) {
+            if(type !== "click") return;
+            openerp.jsonRpc('/shop/change_styles', 'call', {'id': this.product_tmpl_id, 'style_id': value});
+        },
+        go_to: function (type, value) {
+            if(type !== "click") return;
+            openerp.jsonRpc('/shop/change_sequence', 'call', {'id': this.product_tmpl_id, 'sequence': value})
+                .then(this.reload);
+        }
     });
 
 })();
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
new file mode 100644
index 00000000000..ed2bec63bad
--- /dev/null
+++ b/addons/website_sale/views/snippets.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+<template id="website_sale" inherit_id="website.snippets" name="Snippet Ecommerce">
+
+    <xpath expr="//div[@id='snippet_options']" position="inside">
+        <div data-option='website_sale'
+            data-selector=".oe_product.oe_grid"
+            data-no-check="true">
+
+          <li class='dropdown-submenu'>
+            <a tabindex="-1" href="#">Size</a>
+            <ul class="dropdown-menu" name="size">
+              <li><a href="#">
+                <table>
+                  <tr><td class="selected"></td><td></td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td></td><td></td></tr>
+                </table>
+              </a></li>
+            </ul>
+          </li>
+          <li class='dropdown-submenu'>
+            <a tabindex="-1" href="#">Styles</a>
+            <ul class="dropdown-menu" name="style">
+            </ul>
+          </li>
+          <li class='dropdown-submenu'>
+              <a tabindex="-1" href="#">Promote</a>
+              <ul class="dropdown-menu">
+                  <li data-go_to="top"><a>Push to top</a></li>
+                  <li data-go_to="up"><a>Push up</a></li>
+                  <li data-go_to="down"><a>Push down</a></li>
+                  <li data-go_to="bottom"><a>Push to bottom</a></li>
+              </ul>
+          </li>
+        </div>
+    </xpath>
+
+</template>
+</data>
+</openerp>
+\ No newline at end of file
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 67bb5443352..a0e30689f10 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -156,65 +156,6 @@
                           t-attf-class="oe_product oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] }">
 
                           <div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
-
-                            <div class="css_options" t-ignore="true" groups="base.group_website_publisher">
-                              <div t-attf-class="dropdown js_options" t-att-data-id="product.id">
-                                <button class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></button>
-                                <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
-                                  <li class='dropdown-submenu'>
-                                    <a tabindex="-1" href="#">Size</a>
-                                    <ul class="dropdown-menu" name="size">
-                                      <li><a href="#">
-                                        <table>
-                                          <tr>
-                                            <td class="selected"></td>
-                                            <td t-att-class="product.website_size_x > 1 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_x > 2 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_x > 3 and 'selected'"></td>
-                                          </tr>
-                                          <tr>
-                                            <td t-att-class="product.website_size_y > 1 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
-                                          </tr>
-                                          <tr>
-                                            <td t-att-class="product.website_size_y > 2 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
-                                          </tr>
-                                          <tr>
-                                            <td t-att-class="product.website_size_y > 3 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
-                                            <td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
-                                          </tr>
-                                        </table>
-                                      </a></li>
-                                    </ul>
-                                  </li>
-                                  <li class='dropdown-submenu'>
-                                    <a tabindex="-1" href="#">Styles</a>
-                                    <ul class="dropdown-menu" name="style">
-                                      <t t-foreach="styles" t-as="style">
-                                        <li t-att-class="style_in_product(style, product) and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
-                                      </t>
-                                    </ul>
-                                  </li>
-                                  <li class='dropdown-submenu'>
-                                      <a tabindex="-1" href="#">Promote</a>
-                                      <ul class="dropdown-menu" name="sequence">
-                                          <li><a href="#" class="js_go_to_top">Push to top</a></li>
-                                          <li><a href="#" class="js_go_up">Push up</a>
-                                          </li>
-                                          <li><a href="#" class="js_go_down">Push down</a></li>
-                                          <li><a href="#" class="js_go_to_bottom">Push to bottom</a></li>
-                                      </ul>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
                             <t t-set="product_image_big" t-value="td_product['x']+td_product['y'] > 2"/>
                             <t t-call="website_sale.products_item"/>
                           </div>
diff --git a/addons/website_twitter/views/twitter_snippet.xml b/addons/website_twitter/views/twitter_snippet.xml
index 30be5068423..66c6d50b3da 100644
--- a/addons/website_twitter/views/twitter_snippet.xml
+++ b/addons/website_twitter/views/twitter_snippet.xml
@@ -16,7 +16,7 @@
     </template>
     <template id="website_twitter_options" name="Twitter Options" inherit_id="website.snippet_options">
         <xpath expr="//div" position="after">
-            <div data-snippet-option-id='twitter'
+            <div data-option='twitter'
                 data-selector=".twitter"
                 data-selector-children=".oe_structure, [data-oe-type=html]">
             </div>