changed orbit bar for backend ... added preview to layouts for widgets and index ... also fixed alot of bugs..

app/assets/javascripts/lib/items/items.js.erb

@@ -200,12 +200,29 @@ var Items = function(){
           if(data.layouts.length){
              layouts_list.parent().find("label.control-label").text("Layout type:");
             var controlDiv = $("<div class='controls'></div>"),
-                select = $("<select name='page[layout]'></select>");
+                select = $("<select name='page[layout]' class='select2' id='page_layout'></select>"),
+                do_select = false;
             $.each(data.layouts,function(i,layout){
+              if(typeof layout.length == "number"){
                 select.append("<option value='" + layout + "'>" + layout + "</option>");
+              }else if(typeof layout.length == "undefined"){
+                do_select = true;
+                select.append("<option value='" + layout.filename + "' data-image='" + layout.thumbnail + "'>" + layout.name + "</option>");
+              }
             })
             controlDiv.html(select);
             layouts_list.html(controlDiv);
+            if(do_select){
+              select.select2({
+                 formatResult: function(el){
+                  var $element = $(el.element),
+                    image = $element.data("image");
+                  return "<img class='flag' src='" + image + "'/>" + el.text;
+                 },
+                 minimumResultsForSearch: -1,
+                 width : 250
+              });
+            }
           }else{
              layouts_list.parent().find("label.control-label").text("");
             layouts_list.empty();
@@ -258,74 +275,15 @@ function customOpenSlide() {
   $iFrame = $openSlide.filter('.view-page.open-slide');
   $noiFrame.pageslide({
     W: 314,
-    openFn: function(pageslide, element) {
+    openFn: function(pageslide, element) {},
-      element.addClass('active')
+    closeFn: function(pageslide, element) {},
-             .closest('.item-menu')
+    loadComplete: function(pageslide, element) {}
-             .css('display', 'inline-block')
-             .closest('.navbar-inner')
-             .addClass('active');
-    },
-    closeFn: function(pageslide, element) {
-      $('.item-menu').removeAttr('style');
-      element.removeClass('active')
-             .closest('.navbar-inner')
-             .removeClass('active');
-    },
-    loadComplete: function(pageslide, element) {
-      $openSlide.removeClass('active');
-      $('.navbar-inner').removeClass('active');
-      $('.item-menu').removeAttr('style');
-      element.addClass('active')
-             .closest('.item-menu')
-             .css('display', 'inline-block')
-             .closest('.navbar-inner')
-             .addClass('active');
-      _type = element.hasClass('page') ? 'page' : 'link';
-      var _id = element.data('id'),
-          _parent = element.data('parent'),
-          _edit = element.hasClass('edit') ? true : false;
-      $('#pageslide .parent').val(_parent);
-      if(_id !== 'new') {
-        $('#pageslide form').attr({
-          // 'action': $('#pageslide form').attr('action') + '/' + _id,
-          // 'id': 'edit_' + _type + '_' + _id,
-          // 'method': 'put'
-        });
-        setForm(element.data('form'));
-      } else {
-        $('#pageslide form').prop('method', 'post')
-      };
-      _type == 'page' ? pageSetting(element.data('id'), _edit, pageslide) : linkSetting(element.data('id'), _edit, pageslide);
-    }
   });
   $iFrame.pageslide({
     W: $pageslideW,
     iframe: true,
-    openFn: function(pageslide, element) {
+    openFn: function(pageslide, element) {},
-      element.addClass('active')
+    closeFn: function(pageslide, element) {},
-             .closest('.item-menu')
+    loadComplete: function(pageslide, element) {}
-             .css('display', 'inline-block')
-             .closest('.navbar-inner')
-             .addClass('active');
-    },
-    closeFn: function(pageslide, element) {
-      $('.item-menu').removeAttr('style');
-      element.removeClass('active')
-             .closest('.navbar-inner')
-             .removeClass('active');
-      $('#main-wrap').css('width', 'auto')
-    },
-    loadComplete: function(pageslide, element) {
-      $openSlide.removeClass('active');
-      $('.navbar-inner').removeClass('active');
-      $('.item-menu').removeAttr('style');
-      element.addClass('active')
-             .closest('.item-menu')
-             .css('display', 'inline-block')
-             .closest('.navbar-inner')
-             .addClass('active');
-      pageslide.find('.content').css('padding', 0);
-      // iFrameContent()
-    }
   });
 }

app/assets/javascripts/validator.js

@@ -60,7 +60,7 @@ var FormValidator = function(form){
 					}
 				}
 			})
-			if(fv.form.find("div.validator_error_class").length){
+			if(failed_elements.length){
 				var offset = failed_elements[0].offset().top - fv.form.offset().top + fv.form.scrollTop();
 				fv.form.parent().animate({scrollTop:offset-50}, '300', 'swing');
 				return false;

app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb

@@ -45,7 +45,7 @@ $orbit-bar-bgc-lighter:           lighten($orbit-bar-bgc, 20%) !default;
   left: 0;
   font-family: 'Chivo';
   font-size: 16px;
-  z-index: 999;
+  z-index: 1060;
   -webkit-box-sizing: initial;
   -moz-box-sizing: initial;
   box-sizing: initial;

app/assets/stylesheets/select2/select2.css.erb

@@ -0,0 +1,704 @@
+/*
+Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014
+*/
+.select2-container {
+    margin: 0;
+    position: relative;
+    display: inline-block;
+    /* inline-block for ie7 */
+    zoom: 1;
+    *display: inline;
+    vertical-align: middle;
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input {
+  /*
+    Force border-box so that % widths fit the parent
+    container without overlap because of margin/padding.
+    More Info : http://www.quirksmode.org/css/box.html
+  */
+  -webkit-box-sizing: border-box; /* webkit */
+     -moz-box-sizing: border-box; /* firefox */
+          box-sizing: border-box; /* css3 */
+}
+
+.select2-container .select2-choice {
+    display: block;
+    height: 26px;
+    padding: 0 0 0 8px;
+    overflow: hidden;
+    position: relative;
+
+    border: 1px solid #aaa;
+    white-space: nowrap;
+    line-height: 26px;
+    color: #444;
+    text-decoration: none;
+
+    border-radius: 4px;
+
+    background-clip: padding-box;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
+    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
+    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
+    background-image: linear-gradient(to top, #eee 0%, #fff 50%);
+}
+
+html[dir="rtl"] .select2-container .select2-choice {
+    padding: 0 8px 0 0;
+}
+
+.select2-container.select2-drop-above .select2-choice {
+    border-bottom-color: #aaa;
+
+    border-radius: 0 0 4px 4px;
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
+    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
+    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
+    background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
+}
+
+.select2-container.select2-allowclear .select2-choice .select2-chosen {
+    margin-right: 42px;
+}
+
+.select2-container .select2-choice > .select2-chosen {
+    margin-right: 26px;
+    display: block;
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    text-overflow: ellipsis;
+    float: none;
+    width: auto;
+}
+
+html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
+    margin-left: 26px;
+    margin-right: 0;
+}
+
+.select2-container .select2-choice abbr {
+    display: none;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    right: 24px;
+    top: 8px;
+
+    font-size: 1px;
+    text-decoration: none;
+
+    border: 0;
+    background: url('<%= asset_path "select2/select2.png" %>)') right top no-repeat;
+    cursor: pointer;
+    outline: 0;
+}
+
+.select2-container.select2-allowclear .select2-choice abbr {
+    display: inline-block;
+}
+
+.select2-container .select2-choice abbr:hover {
+    background-position: right -11px;
+    cursor: pointer;
+}
+
+.select2-drop-mask {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    min-width: 100%;
+    height: auto;
+    width: auto;
+    opacity: 0;
+    z-index: 9998;
+    /* styles required for IE to work */
+    background-color: #fff;
+    filter: alpha(opacity=0);
+}
+
+.select2-drop {
+    width: 100%;
+    margin-top: -1px;
+    position: absolute;
+    z-index: 9999;
+    top: 100%;
+
+    background: #fff;
+    color: #000;
+    border: 1px solid #aaa;
+    border-top: 0;
+
+    border-radius: 0 0 4px 4px;
+
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop.select2-drop-above {
+    margin-top: 1px;
+    border-top: 1px solid #aaa;
+    border-bottom: 0;
+
+    border-radius: 4px 4px 0 0;
+
+    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+            box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop-active {
+    border: 1px solid #5897fb;
+    border-top: none;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+    border-top: 1px solid #5897fb;
+}
+
+.select2-drop-auto-width {
+    border-top: 1px solid #aaa;
+    width: auto;
+}
+
+.select2-drop-auto-width .select2-search {
+    padding-top: 4px;
+}
+
+.select2-container .select2-choice .select2-arrow {
+    display: inline-block;
+    width: 18px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    border-left: 1px solid #aaa;
+    border-radius: 0 4px 4px 0;
+
+    background-clip: padding-box;
+
+    background: #ccc;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
+    background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
+}
+
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
+    left: 0;
+    right: auto;
+
+    border-left: none;
+    border-right: 1px solid #aaa;
+    border-radius: 4px 0 0 4px;
+}
+
+.select2-container .select2-choice .select2-arrow b {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat 0 1px;
+}
+
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
+    background-position: 2px 1px;
+}
+
+.select2-search {
+    display: inline-block;
+    width: 100%;
+    min-height: 26px;
+    margin: 0;
+    padding-left: 4px;
+    padding-right: 4px;
+
+    position: relative;
+    z-index: 10000;
+
+    white-space: nowrap;
+}
+
+.select2-search input {
+    width: 100%;
+    height: auto !important;
+    min-height: 26px;
+    padding: 4px 20px 4px 5px;
+    margin: 0;
+
+    outline: 0;
+    font-family: sans-serif;
+    font-size: 1em;
+
+    border: 1px solid #aaa;
+    border-radius: 0;
+
+    -webkit-box-shadow: none;
+            box-shadow: none;
+
+    background: #fff url('<%= asset_path "select2/select2.png" %>') no-repeat 100% -22px;
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
+}
+
+html[dir="rtl"] .select2-search input {
+    padding: 4px 5px 4px 20px;
+
+    background: #fff url('<%= asset_path "select2/select2.png" %>') no-repeat -37px -22px;
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2.png" %>') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
+}
+
+.select2-drop.select2-drop-above .select2-search input {
+    margin-top: 4px;
+}
+
+.select2-search input.select2-active {
+    background: #fff url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%;
+    background: url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+    border: 1px solid #5897fb;
+    outline: none;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+
+.select2-dropdown-open .select2-choice {
+    border-bottom-color: transparent;
+    -webkit-box-shadow: 0 1px 0 #fff inset;
+            box-shadow: 0 1px 0 #fff inset;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: #eee;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
+    background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
+    background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+    background-image: linear-gradient(to top, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices {
+    border: 1px solid #5897fb;
+    border-top-color: transparent;
+
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
+    background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
+    background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+    background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow {
+    background: transparent;
+    border-left: none;
+    filter: none;
+}
+html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
+    border-right: none;
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow b {
+    background-position: -18px 1px;
+}
+
+html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
+    background-position: -16px 1px;
+}
+
+.select2-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/* results */
+.select2-results {
+    max-height: 200px;
+    padding: 0 0 0 4px;
+    margin: 4px 4px 4px 0;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+html[dir="rtl"] .select2-results {
+    padding: 0 4px 0 0;
+    margin: 4px 0 4px 4px;
+}
+
+.select2-results ul.select2-result-sub {
+    margin: 0;
+    padding-left: 0;
+}
+
+.select2-results li {
+    list-style: none;
+    display: list-item;
+    background-image: none;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+    font-weight: bold;
+}
+
+.select2-results .select2-result-label {
+    padding: 3px 7px 4px;
+    margin: 0;
+    cursor: pointer;
+
+    min-height: 1em;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+}
+
+.select2-results-dept-1 .select2-result-label { padding-left: 20px }
+.select2-results-dept-2 .select2-result-label { padding-left: 40px }
+.select2-results-dept-3 .select2-result-label { padding-left: 60px }
+.select2-results-dept-4 .select2-result-label { padding-left: 80px }
+.select2-results-dept-5 .select2-result-label { padding-left: 100px }
+.select2-results-dept-6 .select2-result-label { padding-left: 110px }
+.select2-results-dept-7 .select2-result-label { padding-left: 120px }
+
+.select2-results .select2-highlighted {
+    background: #3875d7;
+    color: #fff;
+}
+
+.select2-results li em {
+    background: #feffde;
+    font-style: normal;
+}
+
+.select2-results .select2-highlighted em {
+    background: transparent;
+}
+
+.select2-results .select2-highlighted ul {
+    background: #fff;
+    color: #000;
+}
+
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-ajax-error,
+.select2-results .select2-selection-limit {
+    background: #f4f4f4;
+    display: list-item;
+    padding-left: 5px;
+}
+
+/*
+disabled look for disabled choices in the results dropdown
+*/
+.select2-results .select2-disabled.select2-highlighted {
+    color: #666;
+    background: #f4f4f4;
+    display: list-item;
+    cursor: default;
+}
+.select2-results .select2-disabled {
+  background: #f4f4f4;
+  display: list-item;
+  cursor: default;
+}
+
+.select2-results .select2-selected {
+    display: none;
+}
+
+.select2-more-results.select2-active {
+    background: #f4f4f4 url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100%;
+}
+
+.select2-results .select2-ajax-error {
+    background: rgba(255, 50, 50, .2);
+}
+
+.select2-more-results {
+    background: #f4f4f4;
+    display: list-item;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
+    background-color: #f4f4f4;
+    background-image: none;
+    border-left: 0;
+}
+
+.select2-container.select2-container-disabled .select2-choice abbr {
+    display: none;
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+    height: auto !important;
+    height: 1%;
+    margin: 0;
+    padding: 0 5px 0 0;
+    position: relative;
+
+    border: 1px solid #aaa;
+    cursor: text;
+    overflow: hidden;
+
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
+    background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
+    background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
+    background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
+}
+
+html[dir="rtl"] .select2-container-multi .select2-choices {
+    padding: 0 0 0 5px;
+}
+
+.select2-locked {
+  padding: 3px 5px 3px 5px !important;
+}
+
+.select2-container-multi .select2-choices {
+    min-height: 26px;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+    border: 1px solid #5897fb;
+    outline: none;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+.select2-container-multi .select2-choices li {
+    float: left;
+    list-style: none;
+}
+html[dir="rtl"] .select2-container-multi .select2-choices li
+{
+    float: right;
+}
+.select2-container-multi .select2-choices .select2-search-field {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+    padding: 5px;
+    margin: 1px 0;
+
+    font-family: sans-serif;
+    font-size: 100%;
+    color: #666;
+    outline: 0;
+    border: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    background: transparent !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+    background: #fff url('<%= asset_path "select2/select2-spinner.gif" %>') no-repeat 100% !important;
+}
+
+.select2-default {
+    color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+    padding: 3px 5px 3px 18px;
+    margin: 3px 0 3px 5px;
+    position: relative;
+
+    line-height: 13px;
+    color: #333;
+    cursor: default;
+    border: 1px solid #aaaaaa;
+
+    border-radius: 3px;
+
+    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+            box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+
+    background-clip: padding-box;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+
+    background-color: #e4e4e4;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
+    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+    background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+}
+html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
+{
+    margin: 3px 5px 3px 0;
+    padding: 3px 18px 3px 5px;
+}
+.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
+    cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+    background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+    display: block;
+    width: 12px;
+    height: 13px;
+    position: absolute;
+    right: 3px;
+    top: 4px;
+
+    font-size: 1px;
+    outline: none;
+    background: url('<%= asset_path "select2/select2.png" %>') right top no-repeat;
+}
+html[dir="rtl"] .select2-search-choice-close {
+    right: auto;
+    left: 3px;
+}
+
+.select2-container-multi .select2-search-choice-close {
+    left: 3px;
+}
+
+html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
+    left: auto;
+    right: 2px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+  background-position: right -11px;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+    background-position: right -11px;
+}
+
+/* disabled styles */
+.select2-container-multi.select2-container-disabled .select2-choices {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+    padding: 3px 5px 3px 5px;
+    border: 1px solid #ddd;
+    background-image: none;
+    background-color: #f4f4f4;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
+    background: none;
+}
+/* end multiselect */
+
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-match {
+    text-decoration: underline;
+}
+
+.select2-offscreen, .select2-offscreen:focus {
+    clip: rect(0 0 0 0) !important;
+    width: 1px !important;
+    height: 1px !important;
+    border: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    outline: 0 !important;
+    left: 0px !important;
+    top: 0px !important;
+}
+
+.select2-display-none {
+    display: none;
+}
+
+.select2-measure-scrollbar {
+    position: absolute;
+    top: -10000px;
+    left: -10000px;
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+}
+
+/* Retina-ize icons */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
+    .select2-search input,
+    .select2-search-choice-close,
+    .select2-container .select2-choice abbr,
+    .select2-container .select2-choice .select2-arrow b {
+        background-image: url('<%= asset_path "select2/select2x2.png" %>') !important;
+        background-repeat: no-repeat !important;
+        background-size: 60px 40px !important;
+    }
+
+    .select2-search input {
+        background-position: 100% -21px !important;
+    }
+}

app/controllers/application_controller.rb

@@ -62,6 +62,10 @@ class ApplicationController < ActionController::Base
     path = request.path.split('/')
     is_mobile_path = ( (path[1].eql?("mobile") or path[2].eql?("mobile")) or params[:mobile].eql?("1") )
 
+    if params[:editmode] == "on"
+      $temp_mobile = session[:mobile]
+    end
+
     if params[:mobile].eql?("0")
       session[:desktop] = true
       session[:mobile] = false

app/controllers/page_parts_controller.rb

@@ -36,20 +36,9 @@ class PagePartsController < ApplicationController
     @modules = ModuleApp.widget_enabled
     @modules = @modules.concat(OrbitWidget.all)
     if @kind == "module_widget"
-      @widget_types = []
       module_name = @subpart.module
-      Dir.glob("#{Rails.root}/app/templates/#{@key}/modules/#{module_name.downcase}/*").each do |w|
+      @widget_types = get_widget_files(module_name)
-        next if File.ftype(w).eql?("directory")
+     
-        w = File.basename(w, ".*") 
-        w = File.basename(w, ".*")
-        @widget_types << w.gsub("_","") if w != "index" && w != "show"
-      end
-      Dir.glob("#{Rails.root}/app/templates/#{@key}/widgets/#{module_name.downcase}/*").each do |w|
-        next if File.ftype(w).eql?("directory")
-        w = File.basename(w, ".*") 
-        w = File.basename(w, ".*")
-        @widget_types << w.gsub("_","") if w != "index" && w != "show"
-      end 
       app = ModuleApp.find_by_key(module_name) rescue nil
       app = OrbitWidget.find_by_key(module_name) if app.nil?
       @categories = app.categories rescue []
@@ -106,19 +95,8 @@ class PagePartsController < ApplicationController
     module_name = params[:module]
     part = part_model.where(:part_id => params[:part_id], :page_id => params[:page_id]).first
     @select_number = part.sub_parts.count rescue 0
-    @widget_types = []
+    @widget_types = get_widget_files(module_name)
-    Dir.glob("#{Rails.root}/app/templates/#{@key}/modules/#{module_name.downcase}/*").each do |w|
+
-      next if File.ftype(w).eql?("directory")
-      w = File.basename(w, ".*") 
-      w = File.basename(w, ".*")
-      @widget_types << w.gsub("_","") if w != "index" && w != "show"
-    end
-     Dir.glob("#{Rails.root}/app/templates/#{@key}/widgets/#{module_name.downcase}/*").each do |w|
-      next if File.ftype(w).eql?("directory")
-      w = File.basename(w, ".*") 
-      w = File.basename(w, ".*")
-      @widget_types << w.gsub("_","") if w != "index" && w != "show"
-    end
     module_name = module_name.downcase.singularize
     app = ModuleApp.find_by_key(module_name) rescue nil
     app = OrbitWidget.find_by_key(module_name) if app.nil?
@@ -172,6 +150,49 @@ class PagePartsController < ApplicationController
 
   private
 
+  def get_widget_files(module_name)
+    temp = []
+    f = File.join("#{Rails.root}/app/templates/#{@key}/modules/#{module_name.downcase}/info.json")
+    if File.exists?f
+      info = File.read(f)
+      hash = JSON.parse(info) rescue {}
+      widgets = hash["widgets"] || []
+      widgets.each do |w|
+        w["thumbnail"] = "/assets/#{module_name.downcase}/thumbs/#{w["thumbnail"]}"
+        temp << w
+      end
+    end
+    if temp.empty?
+      Dir.glob("#{Rails.root}/app/templates/#{@key}/modules/#{module_name.downcase}/*").each do |w|
+        next if File.ftype(w).eql?("directory")
+        w = File.basename(w, ".*") 
+        w = File.basename(w, ".*")
+        temp << w.gsub("_","") if w[0,1] == "_"
+      end
+    end
+    if temp.empty?
+      f = File.join("#{Rails.root}/app/templates/#{@key}/widgets/#{module_name.downcase}/info.json")
+      if File.exists?f
+        info = File.read(f)
+        hash = JSON.parse(info) rescue {}
+        widgets = hash["widgets"] || []
+        widgets.each do |w|
+          w["thumbnail"] = "/assets/#{module_name.downcase}/thumbs/#{w["thumbnail"]}"
+          temp << w
+        end
+      end
+    end
+    if temp.empty?
+       Dir.glob("#{Rails.root}/app/templates/#{@key}/widgets/#{module_name.downcase}/*").each do |w|
+        next if File.ftype(w).eql?("directory")
+        w = File.basename(w, ".*") 
+        w = File.basename(w, ".*")
+        temp << w.gsub("_","") if w[0,1] == "_"
+      end
+    end
+    temp
+  end
+
   def part_params
     params.require(:page_part).permit!
   end

app/controllers/pages_controller.rb

@@ -235,14 +235,26 @@ class PagesController < ApplicationController
 
   def get_layouts(module_app)
     layout_types = []
+    f = File.join("#{Rails.root}/app/templates/#{@key}/modules/#{module_app}/info.json")
+    if File.exists?f
+      info = File.read(f)
+      hash = JSON.parse(info) rescue {}
+      frontends = hash["frontend"] || []
+      frontends.each do |frontend|
+        frontend["thumbnail"] = "/assets/#{module_app}/thumbs/#{frontend["thumbnail"]}"
+        layout_types <<  frontend
+      end
+    end
+    if layout_types.empty?
       Dir.glob("#{Rails.root}/app/templates/#{@key}/modules/#{module_app}/*").each do |w|
         next if File.ftype(w).eql?("directory")
         w = File.basename(w, ".*") 
         w = File.basename(w, ".*") 
-      if w[0,1] != "_" && w[0,1] != "s"
+        if w[0,1] != "_" && w[0,1] != "s" && w != "info"
           layout_types << w
         end
       end
+    end
     layout_types
   end
 
@@ -312,10 +324,10 @@ class PagesController < ApplicationController
         pps.each do |pp|
           number = pp.attributes["data-pp"].value
           if pp.inner_html == ""
-              pp.inner_html = "<a href='/page_parts/new?part=#{number}&page_id=#{page.id.to_s}'> </a>"
+              pp.inner_html = "<a href='/page_parts/new?part=#{number}&page_id=#{page.id.to_s}#{(!$mobile.blank? ? '&mobile_view=1' : '')}'> </a>"
           else
             inner_html = pp.inner_html
-            pp.inner_html = inner_html + "<a href='/page_parts/#{number}/edit?page_id=#{page.id.to_s}'> </a>"
+            pp.inner_html = inner_html + "<a href='/page_parts/#{number}/edit?page_id=#{page.id.to_s}#{(!$mobile.blank? ? '&mobile_view=1' : '')}'> </a>"
           end
         end
       end
@@ -332,6 +344,9 @@ class PagesController < ApplicationController
         final_html_for_render = render_to_string(original_view) rescue "<div></div>"
     end
     final_html_for_render = change_to_language(final_html_for_render)
+    if @editmode
+      session[:mobile] = $temp_mobile
+    end
     final_html_for_render
   end
 
@@ -408,17 +423,13 @@ class PagesController < ApplicationController
   end
 
   def set_edit_mode
+    @dataApi = nil
+    @editmode = false
     if !current_user.nil? and current_user.is_admin?
       if params[:editmode] == "on"
         @editmode = true
         @dataApi = "edit"
-      else
-        @dataApi = nil
-        @editmode = false
       end
-    else
-      @dataApi = nil
-      @editmode = false
     end
   end
  

app/templates/orbit_bootstrap/modules/announcement/info.json

@@ -0,0 +1,21 @@
+{
+	"frontend": [
+		{
+			"filename" : "index",
+			"name" : "Index with image",
+			"thumbnail" : "1.png"
+		},
+		{
+			"filename" : "index1",
+			"name" : "Index without image",
+			"thumbnail" : "1.png"
+		}
+	],
+	"widgets" : [
+		{
+			"filename" : "widget",
+			"name" : "Widget with image",
+			"thumbnail" : "1.png"
+		}
+	]
+}

app/templates/orbit_bootstrap/widgets/breadcrumb_widget/info.json

@@ -0,0 +1,9 @@
+{
+	"widgets" : [
+		{
+			"filename" : "widget1",
+			"name" : "Widget with image",
+			"thumbnail" : "1.png"
+		}
+	]
+}

app/views/admin/items/index.html.erb

@@ -1,4 +1,7 @@
+<%= stylesheet_link_tag "select2/select2" %>
 <%= javascript_include_tag 'validator' %>
+<%= javascript_include_tag "select2/select2.min" %>
+
 <% node = Page.root %>
 <% unless node.nil? %>
 <ol id='<%= node.id %>' class="sortable item-groups root">

app/views/layouts/_left_menu.html.erb

@@ -1,31 +0,0 @@
-<ul class="nav" role="navigation">
-
-  <!-- menu -->
-  <li id="orbit-start" class="dropdown">
-    <a class="orbitlogo" href="<%= admin_dashboards_path %>" role="button" class="dropdown-toggle" data-toggle="dropdown" title="<%= t('dashboard_')%>" <% unless current_site.default_image.blank? %> style="background-image: url('<%= current_site. default_image.url %>');" <% end %> ></a>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="orbit-start">
-      <li><%= link_to content_tag(:i, nil, :class => 'icons-gauge') + ' ' + t(:dashboard_), admin_dashboards_path, tabindex: '-1' %></li>
-      <li><%= link_to content_tag(:i, nil, :class => 'icons-users') + ' ' + t(:member_), admin_members_path, tabindex: '-1' %></li>
-      <% if (current_user.present? && current_user.workgroup.present? && current_user.is_admin?) %>
-        <li class="divider"></li>
-        <li><%= link_to content_tag(:i, nil, :class => 'icons-cog') + ' ' + t('site.settings'), admin_items_path, tabindex: '-1' %></li>
-      <% end%>
-    </ul>
-  </li>
-
-  <!-- home -->
-  <li id="orbit-home">
-    <a href="<%= root_path %>" role="button" title="<%= t('homepage')%>">
-      <i class="icons-house"></i> <span class="hide"><%= t(:homepage) %></span>
-    </a>
-  </li>
-
-  <!-- Desktop -->
-  <% unless  current_site.desktop_closed %>
-    <li id="orbit-desktop">
-      <a href="" role="button" title="<%= t('desktop')%>">
-        <i class="icons-screen"></i> <span class="hide"><%= t(:desktop) %></span>
-      </a>
-    </li>
-  <% end%>
-</ul>

app/views/layouts/_orbit_bar_backend.html.erb

@@ -1,6 +0,0 @@
-<header id="orbit-bar" class="orbit-bar navbar">
-  <div class="navbar-inner">
-    <%= render "layouts/left_menu" %>
-    <%= render "layouts/right_menu" %>
-  </div>
-</header>

app/views/layouts/_right_menu.html.erb

@@ -1,89 +0,0 @@
-<ul class="nav pull-right" role="navigation">
-
-    <!-- search -->
-    <%
-      google_search_cx = current_site.search['sitesearch'] rescue nil
-      unless google_search_cx.blank?
-    %>
-    <li id="search" class="searchClear">
-      <form id="search_form" method="get" action="http://www.google.com/cse" target="_blank">
-        <input type="hidden" name="cx" value="<%= google_search_cx %>">
-        <%= text_field_tag 'q', '', {:class => "search-query input-medium", :placeholder => t("search.sitesearch"), 'x-webkit-speech' => ''} %>
-      </form>
-    </li>
-    <% end %>
-
-    <!-- Language -->
-    <li id="orbit-language" class="dropdown">
-      <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" title="<%#= t('site.language')%>"><%= t(:_locale, :locale => I18n.locale) %></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="orbit-language">
-          <% current_site.in_use_locales.each do |locale| %>
-          <%= content_tag :li, (link_to t(:_locale, :locale => locale), :locale => locale), :class => (I18n.locale.eql?(locale.to_sym) ? 'active' : nil), tabindex: "-1" %>
-        <% end %>
-      </ul>
-    </li>
-
-      <% if current_user.present? %>
-      <!-- user -->
-      <li id="orbit-user" class="dropdown">
-        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
-          <%= image_tag 'menber-pic.png', class: "user-pic" %>
-          <% if current_user.member_profile.present?%>
-            <span><%= current_user.member_profile.name %></span>
-          <% else %>
-            <span><%= current_user.user_name %></span>
-          <% end %>          
-        </a>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="orbit-user">
-          <li><%= link_to content_tag(:i, nil, class: 'icons-tools') + ' ' +  t("users.change_passwd"),admin_member_edit_passwd_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
-          <li><%= link_to content_tag(:i, nil, class: 'icons-vcard') + ' ' +  t("users.user_basic_data"),admin_member_path(current_user.member_profile.to_param), tabindex: '-1' %></li>
-          <li><%= link_to content_tag(:i, nil, class: 'icons-logout') + ' ' +  t(:logout), logout_path, tabindex: '-1' %></li>
-        </ul>
-      </li>
-    <% else %>
-      <!-- login -->
-      <li id="orbit-login">
-        <a href="#login" role="button" data-toggle="modal" title="<%= t('login')%>">
-          <i class="icons-login"></i> <span class="hide"><%= t(:login) %></span>
-        </a>
-      </li>
-      <!-- Log in Modal -->
-        <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 id="ModalLabel"><%= t(:login_orbit) %></h3>
-          </div>
-          <div class="modal-body">
-            <%= form_tag sessions_path, :class => 'container' do %>
-            <%#= form_for :user, url: sessions_path, html: {class: 'container'} do |f| %>
-              <div class="input-prepend">
-                <span class="add-on">
-                  <i class="icon-user"></i>
-                </span>
-                <%#= f.text_field :user_name, class: "input-xlarge" , placeholder: t("users.user_id") %>
-                <%= text_field_tag :user_name, params[:user_name], :placeholder => t("users.user_id"), :id=>"user_email" %>
-              </div>
-              <div class="input-prepend">
-                <span class="add-on">
-                  <i class="icon-lock"></i>
-                </span>
-                <%#= f.password_field :password, class: "input-xlarge", placeholder: t(:password) %>
-                <%= password_field_tag :password, nil, :placeholder => t(:dots), :id=>"user_password" %>
-              </div>
-              <div class="pull-left" style="width: 150px;">
-                <label class="checkbox">
-                  <input type="checkbox" name="remember_me" value="1" checked="checked" />
-                  <small>Remember me</small>
-                </label>
-                <%= content_tag :button, t(:login), :type => :submit, :class => 'btn btn-primary' %>
-              </div>
-              <div class="pull-right">
-                <%= link_to content_tag(:small, t(:forgot_password)) %>
-              </div>
-            <% end %>
-          </div>
-          <div class="modal-footer">
-          </div>
-        </div>
-    <% end %>     
-</ul>

app/views/layouts/back_end.html.erb

@@ -14,7 +14,7 @@
   <%= csrf_meta_tags %>
 </head>
 <body id="dashboards">
-	<%= render 'layouts/orbit_bar_backend' %>
+  <%= render_orbit_bar %>
 	<%= render 'layouts/side_bar' %>
 	<section id="main-wrap">
         <div class="wrap-inner">

app/views/layouts/basic_back_end.html.erb

@@ -14,7 +14,7 @@
   <%= csrf_meta_tag %>
 </head>
 <body id="dashboards">
-  <%= render 'layouts/orbit_bar_backend' %>
+  <%= render_orbit_bar %>
   <%= render 'layouts/side_bar' %>
   <%= yield %>
 </body>

app/views/layouts/structure.html.erb

@@ -12,7 +12,7 @@
   <%= csrf_meta_tag %>
 </head>
 <body id="sideset">
-  <%= render 'layouts/orbit_bar_backend' unless @no_orbit_bar %>
+  <%= render_orbit_bar unless @no_orbit_bar %>
   <%= render 'shared/side_bar' unless @no_side_bar %>
   <section id="main-wrap">
     <div class="wrap-inner">

app/views/page_parts/_widget_form.html.erb

@@ -1,7 +1,26 @@
 <div class="control-group input-content">
 	<label class="control-label muted"><%= t('default_widget.select_widget_style') %></label>
 	<div class="controls">
+	<% if @widget_types.first.kind_of?(Hash) %>
+		<select name="page_part[sub_parts_attributes][<%= @select_number %>][widget_type]" id="page_layout" class="select2">
+				<% @widget_types.each do |lt| %>
+					<option value="<%= lt["filename"] %>" <%= ((lt["filename"] == @subpart.widget_type ? "selected=selected" : "") rescue nil) %> data-image="<%= lt["thumbnail"] %>"><%= lt["name"] %></option>
+				<% end %>
+			</select>
+			<script type="text/javascript">
+			$("select.select2").select2({
+				 formatResult: function(el){
+				 	var $element = $(el.element),
+				 		image = $element.data("image");
+				 	return "<img class='flag' src='" + image + "'/>" + el.text;
+				 },
+				 minimumResultsForSearch: -1,
+				 width : 250
+			});
+			</script>
+	<% else %>
 		<%= select_tag("page_part[sub_parts_attributes][#{@select_number}][widget_type]",options_for_select(@widget_types, (@subpart.widget_type rescue nil))) %>
+	<% end %>
 	</div>
 </div>
 <div class="control-group input-content">

app/views/page_parts/edit.html.erb

@@ -1,3 +1,6 @@
+<%= stylesheet_link_tag "select2/select2" %>
+<%= javascript_include_tag 'validator' %>
+<%= javascript_include_tag "select2/select2.min" %>
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "lib/main-forms" %>
 <% end %>
@@ -26,7 +29,8 @@
 		}
 	})
 	$("form").on("ajax:success",function(){
-		var url = "/<%= I18n.locale.to_s %><%= Page.find(params[:page_id]).url %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
+		<% url = Page.find(params[:page_id]).url %>
+		var url = "/<%= I18n.locale.to_s if url != '/' %><%= url if url != '/'  %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
 		window.location.href = url;
 	})
 </script>

app/views/page_parts/edit_sub_part.html.erb

@@ -1,3 +1,6 @@
+<%= stylesheet_link_tag "select2/select2" %>
+<%= javascript_include_tag 'validator' %>
+<%= javascript_include_tag "select2/select2.min" %>
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "lib/main-forms" %>
 <% end %>
@@ -26,7 +29,8 @@
 		}
 	})
 	$("form").on("ajax:success",function(){
-		var url = "/<%= I18n.locale.to_s %><%= Page.find(params[:page_id]).url %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
+		<% url = Page.find(params[:page_id]).url %>
+		var url = "/<%= I18n.locale.to_s if url != '/' %><%= url if url != '/'  %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
 		window.location.href = url;
 	})
 </script>

app/views/page_parts/new.html.erb

@@ -1,3 +1,6 @@
+<%= stylesheet_link_tag "select2/select2" %>
+<%= javascript_include_tag 'validator' %>
+<%= javascript_include_tag "select2/select2.min" %>
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "lib/main-forms" %>
 <% end %>
@@ -26,7 +29,8 @@
 		}
 	})
 	$("form").on("ajax:success",function(){
-		var url = "/<%= I18n.locale.to_s %><%= Page.find(params[:page_id]).url %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
+		<% url = Page.find(params[:page_id]).url %>
+		var url = "/<%= I18n.locale.to_s if url != '/' %><%= url if url != '/'  %>?editmode=on<%= OrbitHelper.is_mobile_view ? '&mobile_view=1'.html_safe : '' %>";
 		window.location.href = url;
 	})
 </script>

app/views/pages/_form.html.erb

@@ -106,7 +106,26 @@
 	<div id="layouts_list">
 		<% if params[:action] == "edit" && !@layout_types.blank? %>
 			<div class="controls">
+				<% if @layout_types.first.kind_of?(Hash) %>
+					<select name="page[layout]" id="page_layout" class="select2">
+						<% @layout_types.each do |lt| %>
+							<option value="<%= lt["filename"] %>" <%= (lt["filename"] == @page.layout ? "selected=selected" : "") %> data-image="<%= lt["thumbnail"] %>"><%= lt["name"] %></option>
+						<% end %>
+					</select>
+					<script type="text/javascript">
+					$("select.select2").select2({
+						 formatResult: function(el){
+						 	var $element = $(el.element),
+						 		image = $element.data("image");
+						 	return "<img class='flag' src='" + image + "'/>" + el.text;
+						 },
+						 minimumResultsForSearch: -1,
+						 width : 250
+					});
+					</script>
+				<% else %>
 					<%= f.select(:layout, @layout_types) %>
+				<% end %>
 			</div>
 		<% end %>
 	</div>

config/initializers/template.rb

@@ -8,6 +8,8 @@ Dir.glob("#{Rails.root}/app/templates/#{template}").each do |path|
   Rails.application.config.assets.paths << "#{path}/assets/javascripts"
   Rails.application.config.assets.paths << "#{path}/assets/images"
   Rails.application.config.assets.paths << "#{path}/assets/fonts"
+  Rails.application.config.assets.paths << "#{path}/modules"
+  Rails.application.config.assets.paths << "#{path}/widgets"
 end
 
 Dir.glob("#{Rails.root}/app/templates/mobile/orbit_mobile").each do |path|