Merge branch 'modal' into 'master'

Use only colorbox for modals (popins) See merge request !424

Merge branch 'modal' into 'master'
Use only colorbox for modals (popins) See merge request !424
Braulio Bhavamitra
2 parents 9d1bd7a8 eed38cd8
Showing 56 changed files with 239 additions and 1940 deletions Show diff stats
app/helpers/application_helper.rb
app/helpers/boxes_helper.rb
app/helpers/colorbox_helper.rb
app/helpers/comment_helper.rb
app/helpers/lightbox_helper.rb
app/helpers/modal_helper.rb
app/helpers/thickbox_helper.rb
app/views/account/_login_form.html.erb
app/views/account/index_anonymous.html.erb
app/views/account/login.html.erb
app/views/account/logout_popup.html.erb
app/views/box_organizer/add_block.html.erb
app/views/box_organizer/edit.html.erb
app/views/box_organizer/index.html.erb
app/views/cms/edit.html.erb
app/views/cms/select_article_type.html.erb
app/views/cms/view.html.erb
app/views/cms/why_categorize.html.erb
app/views/comment/_comment_form.html.erb
app/views/content_viewer/_article_toolbar.html.erb
@@ -8,11 +8,7 @@ module ApplicationHelper
  
   include PermissionNameHelper
  
-  include LightboxHelper
-
-  include ThickboxHelper
-
-  include ColorboxHelper
+  include ModalHelper
  
   include BoxesHelper
  
@@ -651,8 +647,8 @@ module ApplicationHelper
       ' onfocus="if(this.value==\''+s+'\'){this.value=\'\'} this.form.className=\'focus-in\'"'+
       ' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+
       '</form>'
-    else #opt == 'lightbox_link' is default
-      lightbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
+    else
+      modal_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
                        :controller => 'search',
                        :action => 'popup',
                        :category_path => (@category ? @category.explode_path : nil)},
@@ -1050,7 +1046,7 @@ module ApplicationHelper
       {s_('contents|Most commented') => {:href => url_for({:controller => 'search', :action => 'contents', :filter => 'more_comments'})}}
     ]
     if logged_in?
-      links.push(_('New content') => colorbox_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
+      links.push(_('New content') => modal_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
     end
  
     link_to(content_tag(:span, _('Contents'), :class => 'icon-menu-articles'), {:controller => "search", :action => 'contents', :category_path => nil}, :id => 'submenu-contents') +
@@ -231,7 +231,7 @@ module BoxesHelper
       end
  
       if block.editable?
-        buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
+        buttons << modal_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
       end
  
       if !block.main?
@@ -241,7 +241,7 @@ module BoxesHelper
     end
  
     if block.respond_to?(:help)
-      buttons << thickbox_inline_popup_icon(:help, _('Help on this block'), {}, "help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + thickbox_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
+      buttons << modal_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + modal_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
     end
  
     if block.embedable?
@@ -1,25 +0,0 @@
-module ColorboxHelper
-
-  def colorbox_close_button(text, options = {})
-    button(:close, text, '#', colorbox_options(options, :close))
-  end
-
-  def colorbox_button(type, label, url, options = {})
-    button(type, label, url, colorbox_options(options))
-  end
-
-  def colorbox_icon_button(type, label, url, options = {})
-    icon_button(type, label, url, colorbox_options(options))
-  end
-
-  # options must be an HTML options hash as passed to link_to etc.
-  #
-  # returns a new hash with colorbox class added. Keeps existing classes.
-  def colorbox_options(options, type=nil)
-    the_class = 'colorbox'
-    the_class += "-#{type.to_s}" unless type.nil?
-    the_class << " #{options[:class]}" if options.has_key?(:class)
-    options.merge(:class => the_class)
-  end
-
-end
@@ -65,7 +65,7 @@ module CommentHelper
  
   def link_for_edit(comment)
     if comment.can_be_updated_by?(user)
-      {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}
+      {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'modal')}
     end
   end
  
@@ -1,36 +0,0 @@
-module LightboxHelper
-
-  def lightbox_link_to(text, url, options = {})
-    link_to(text, url, lightbox_options(options))
-  end
-
-  def lightbox_close_button(text, options = {})
-    button(:close, text, '#', lightbox_options(options, 'lbAction').merge(:rel => 'deactivate'))
-  end
-
-  def lightbox_button(type, label, url, options = {})
-    button(type, label, url, lightbox_options(options))
-  end
-
-  def lightbox_icon_button(type, label, url, options = {})
-    icon_button(type, label, url, lightbox_options(options))
-  end
-
-  # options must be an HTML options hash as passed to link_to etc.
-  #
-  # returns a new hash with lightbox class added. Keeps existing classes. 
-  def lightbox_options(options, lightbox_type = 'lbOn')
-    the_class = lightbox_type
-    the_class << " #{options[:class]}" if options.has_key?(:class)
-    options.merge(:class => the_class)
-  end
-
-  def lightbox?
-    request.xhr?
-  end
-
-  def lightbox_remote_button(type, label, url, options = {})
-    button(type, label, url, lightbox_options(options, 'remote-lbOn'))
-  end
-
-end
@@ -0,0 +1,46 @@
+module ModalHelper
+
+  def modal_inline_link_to title, url, selector, options = {}
+    link_to title, url, modal_options(options.merge(:inline => selector))
+  end
+
+  def modal_inline_icon type, title, url, selector, options = {}
+    icon_button type, title, url, modal_options(options.merge(:inline => selector))
+  end
+
+  def modal_link_to title, url, options = {}
+    link_to title, url, modal_options(options)
+  end
+
+  def modal_close_link text, options = {}
+    link_to text, '#', modal_options(options, :close)
+  end
+
+  def modal_close_button(text, options = {})
+    button :close, text, '#', modal_options(options, :close).merge(:rel => 'deactivate')
+  end
+
+  def modal_button(type, label, url, options = {})
+    button type, label, url, modal_options(options)
+  end
+
+  def modal_icon_button(type, label, url, options = {})
+    icon_button type, label, url, modal_options(options)
+  end
+
+  # options must be an HTML options hash as passed to link_to etc.
+  #
+  # returns a new hash with modal class added. Keeps existing classes.
+  def modal_options(options, type=nil)
+    inline_selector = options.delete :inline
+    options[:onclick] = "return noosfero.modal.inline('#{inline_selector}')" if inline_selector
+
+    classes = if inline_selector then '' else 'modal-toggle' end
+    classes += " modal-#{type.to_s}" if type.present?
+    classes << " #{options[:class]}" if options.has_key? :class
+    options.merge!(:class => classes)
+
+    options
+  end
+
+end
@@ -1,11 +0,0 @@
-module ThickboxHelper
-  def thickbox_inline_popup_link(title, url, id, options = {})
-    link_to(title, url_for(url) + "#TB_inline?height=300&width=500&inlineId=#{id}&modal=true", {:class => 'thickbox'}.merge(options))
-  end
-  def thickbox_inline_popup_icon(type, title, url, id, options = {})
-    icon_button(type, title, url_for(url) + "#TB_inline?height=300&width=500&inlineId=#{id}&modal=true", {:class => "thickbox"}.merge(options))
-  end
-  def thickbox_close_button(title)
-    button_to_function(:close, title, 'tb_remove();')
-  end
-end
 <%= labelled_form_for :user,
    :url => { :controller => 'account', :action => (params[:enterprise_code] ? 'activate_enterprise' : 'login') }  do |f| %>
  
-<%= f.text_field :login,
-                 :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
-                 :onchange => 'this.value = convToValidLogin( this.value )' %>
+<%= f.text_field :login, :id => 'user_login', :onchange => 'this.value = convToValidLogin( this.value )' %>
  
-<%= f.password_field :password,
-                     :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password' %>
+<%= f.password_field :password, :id => 'user_password' %>
  
 <% if params[:enterprise_code] %>
   <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
@@ -16,7 +13,7 @@
  
 <% button_bar do %>
   <%= submit_button( 'login', _('Log in') )%>
-  <%= lightbox_close_button(_('Cancel')) if lightbox? %>
+  <%= modal_close_button _('Cancel') if request.xhr? %>
 <% end %>
  
 <% end %>
 <h1><%= _('Identify yourself') %></h1>
  
 <p>
-<%= lightbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
+<%= modal_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
  
 <%= _('You need to login to be able to use all the features in this environment.') %>
 </p>
@@ -3,7 +3,7 @@
 <h2><%= _('Login') %></h2>
  
 <% @user ||= User.new %>
-<% is_thickbox ||= false %>
+<% is_popin ||= false %>
  
 <%= @message %>
  
@@ -17,8 +17,8 @@
  
      <% button_bar do %>
        <%= submit_button( 'login', _('Log in') )%>
-       <% if is_thickbox %>
-         <%= thickbox_close_button(_('Cancel')) %>
+       <% if is_popin %>
+         <%= modal_close_button(_('Cancel')) %>
        <% end %>
      <% end %>
  
@@ -2,6 +2,6 @@
 <p>
 <% button_bar do %>
   <%= button :ok, _('Yes'), { :controller => 'account', :action => 'logout' } %>
-  <%= lightbox_close_button _('No, I want to stay.') %>
+  <%= modal_close_button _('No, I want to stay.') %>
 <% end %>
 </p>
@@ -42,7 +42,7 @@
  
     <% button_bar do %>
       <%= submit_button(:add, _("Add")) %>
-      <%= colorbox_close_button(_('Close')) %>
+      <%= modal_close_button(_('Close')) %>
     <% end %>
  
   <% end %>
@@ -27,7 +27,7 @@
  
     <% button_bar do %>
       <%= submit_button(:save, _('Save')) %>
-      <%= colorbox_close_button(_('Cancel')) %>
+      <%= modal_close_button(_('Cancel')) %>
     <% end %>
  
   <% end %>
 <h1><%= _('Editing sideboxes')%></h1>
  
 <% button_bar :class=>'design-menu' do %>
-  <%= colorbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
+  <%= modal_button('add', _('Add a block'), { :action => 'add_block' }) %>
   <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
 <% end %>
@@ -28,7 +28,7 @@
   <% end %>
  
   <div style='float: right'>
-    <%= lightbox_button :help, _('Why categorize?'), :action => 'why_categorize' %>
+    <%= modal_button :help, _('Why categorize?'), :action => 'why_categorize' %>
   </div>
  
   <%= select_categories(:article, _('Categorize your article')) %>
@@ -15,6 +15,6 @@
 </ul>
 <br style="clear:both" />
  
-<%= colorbox_close_button(_('Cancel')) %>
+<%= modal_close_button(_('Cancel')) %>
  
 </div>
@@ -17,7 +17,7 @@
 <% button_bar(:style => 'margin-bottom: 1em;') do %>
   <% parent_id = ((@article && @article.allow_children?) ? @article : nil) %>
  
-  <%= colorbox_button('new', _('New content'), :action => 'new', :parent_id => parent_id, :cms => true) %>
+  <%= modal_button('new', _('New content'), :action => 'new', :parent_id => parent_id, :cms => true) %>
   <%= button(:back, _('Back to control panel'), :controller => 'profile_editor', :action => "index") %>
 <% end %>
  
@@ -5,5 +5,5 @@
 </p>
  
 <% button_bar do %>
-  <%= lightbox_close_button _('Close') %>
+  <%= modal_close_button _('Close') %>
 <% end %>
@@ -10,7 +10,7 @@
     <%= recaptcha_tags(:display => { :theme => 'clean' }, :ajax => true) %>
     <% button_bar do %>
       <%= button_to_function :add, _('Confirm'), "return false", :id => "confirm-captcha" %>
-      <%= button_to_function :cancel, _('Cancel'), "jQuery.colorbox.close()" %>
+      <%= button_to_function :cancel, _('Cancel'), "noosfero.modal.close()" %>
     <% end %>
   </div>
  
@@ -31,10 +31,10 @@ function check_captcha(button, confirm_action) {
   return true;
   <% else %>
   jQuery('#recaptcha-container').show();
-  jQuery.colorbox({ html: jQuery('#recaptcha-container').html(), maxWidth : '600px', maxHeight : '300px' });
+  noosfero.modal.inline('#recaptcha-container', {maxWidth :'600px', maxHeight : '300px' });
   jQuery('#confirm-captcha').unbind('click');
   jQuery('#confirm-captcha').bind('click', function() {
-    jQuery.colorbox.close();
+    noosfero.modal.close();
     button.form.recaptcha_response_field.value = jQuery('#recaptcha_response_field').val();
     button.form.recaptcha_challenge_field.value = jQuery('#recaptcha_challenge_field').val();
     button.form.confirm.value = 'true';
@@ -88,7 +88,7 @@ function check_captcha(button, confirm_action) {
     <% if !edition_mode %>
       <%= button :cancel, _('Cancel'), '', :id => 'cancel-comment' %>
     <% else %>
-      <%= button :cancel, _('Cancel'), '#', :onclick => "jQuery.colorbox.close();" %>
+      <%= button :cancel, _('Cancel'), '#', :onclick => "noosfero.modal.close();" %>
     <% end %>
   <% end %>
 <% end %>
@@ -28,7 +28,7 @@
         <%= expirable_button @page, :locale, content, url %>
       <% end %>
  
-      <%= colorbox_button(:new, label_for_new_article(@page), profile.admin_url.merge(:controller => 'cms', :action => 'new', :parent_id => (@page.folder? ? @page : (@page.parent.nil? ? nil : @page.parent)))) unless remove_content_button(:new, @page) %>
+      <%= modal_button(:new, label_for_new_article(@page), profile.admin_url.merge(:controller => 'cms', :action => 'new', :parent_id => (@page.folder? ? @page : (@page.parent.nil? ? nil : @page.parent)))) unless remove_content_button(:new, @page) %>
     <% end %>
  
     <% if @page.accept_uploads? && @page.allow_create?(user) %>
@@ -7,10 +7,10 @@ function submit_comment_form(button) {
   return true;
   <% else %>
   jQuery('#recaptcha-container').show();
-  jQuery.colorbox({ inline : true, href : '#recaptcha-container', maxWidth : '600px', maxHeight : '300px' });
+  noosfero.modal.inline('#recaptcha-container', {maxWidth :'600px', maxHeight : '300px' });
   jQuery('#confirm-captcha').unbind('click');
   jQuery('#confirm-captcha').bind('click', function() {
-    jQuery.colorbox.close();
+    noosfero.modal.close();
     button.form.recaptcha_response_field.value = jQuery('#recaptcha_response_field').val();
     button.form.recaptcha_challenge_field.value = jQuery('#recaptcha_challenge_field').val();
     button.form.confirm.value = 'true';
@@ -38,7 +38,7 @@ function submit_comment_form(button) {
     <%= recaptcha_tags(:display => { :theme => 'clean' }, :ajax => true) %>
     <% button_bar do %>
       <%= button_to_function :add, _('Confirm'), "return false", :id => "confirm-captcha" %>
-      <%= button_to_function :cancel, _('Cancel'), "jQuery.colorbox.close()" %>
+      <%= button_to_function :cancel, _('Cancel'), "noosfero.modal.close()" %>
     <% end %>
   </div>
  
@@ -7,11 +7,11 @@
     </span>
   <% else %>
     <span class='not-logged-in'>
-      <%= _("<span class='login'>%s</span>") % thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login') %>
+      <%= _("<span class='login'>%s</span>") % modal_inline_link_to('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, '#inlineLoginBox', :id => 'link_login') %>
       <%= @plugins.dispatch(:alternative_authentication_link).collect { |content| instance_exec(&content) }.join("") %>
  
     <div id='inlineLoginBox' style='display: none;'>
-      <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
+      <%= render :file => 'account/login', :locals => { :is_popin => true } %>
     </div>
  
     <% unless @plugins.dispatch(:allow_user_registration).include?(false) %>
@@ -18,7 +18,7 @@
     <%= yield :head %>
     <%=
       @plugins.dispatch(:head_ending).map do |content|
-        if content.respond_to?(:call) then instance_exec(&content).html_safe else content.html_safe end
+        if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
       end.join("\n")
     %>
  
@@ -32,7 +32,7 @@
  
     <%=
       @plugins.dispatch(:body_beginning).map do |content|
-        if content.respond_to?(:call) then instance_exec(&content).html_safe else content.html_safe end
+        if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
       end.join("\n")
     %>
  
@@ -9,7 +9,7 @@
   <%= hidden_field_tag(:confirmation, 1) %>
   <%= submit_button(:ok, _("Yes, I want to join.") % profile.name) %>
   <% if logged_in? && request.xhr? %>
-    <%= lightbox_close_button(_("No, I don't want")) %>
+    <%= modal_close_button _("No, I don't want") %>
   <% else %>
     <%= button(:cancel, _("No, I don't want."), profile.url) %>
   <% end %>
@@ -9,7 +9,7 @@
   <%= hidden_field_tag(:back_to, @back_to) %>
   <%= submit_button(:ok, _("Yes, I want to leave.") % profile.name) %>
   <% if logged_in? && request.xhr? %>
-    <%= lightbox_close_button(_("No, I don't want")) %>
+    <%= modal_close_button _("No, I don't want") %>
   <% else %>
     <%= button(:cancel, _("No, I don't want."), profile.url) %>
   <% end %>
@@ -9,7 +9,7 @@
   <% end %>
  
   <%= submit_button(:send, _('Report profile'), :style => 'float: left; cursor: pointer;', :id => 'report-abuse-submit-button', :onclick => "jQuery('#form-submit-loading').show()") %>
-  <%= button(:cancel, _('Cancel'), {}, :style => 'float: left; padding-top: 0px; padding-bottom: 0px;', :onclick => 'jQuery.colorbox.close(); return false;')%>
+  <%= button(:cancel, _('Cancel'), {}, :style => 'float: left; padding-top: 0px; padding-bottom: 0px;', :onclick => 'noosfero.modal.close(); return false;')%>
   <div id="form-submit-loading" class="small-loading" style="width: 16px; height: 16px; margin-top: 3px; float: left; display: none;"></div>
 <% end %>
  
@@ -30,7 +30,7 @@
       success: function(data, status, ajax){
         if ( !data.ok ) display_notice(data.error.message);
         else {
-          $.colorbox.close();
+          noosfero.modal.close();
           display_notice(data.message);
           window.location.reload();
         }
@@ -5,7 +5,7 @@
  
   <% button_bar do %>
     <%= submit_button(:add, _('Add')) %>
-    <%= lightbox_close_button(_('Cancel')) %>
+    <%= modal_close_button _('Cancel') %>
   <% end %>
  
 <% end %>
@@ -16,7 +16,7 @@
     <% end %>
   </ul>
   <% button_bar do %>
-    <%= lightbox_button(:add, _('New CSS'), :action => 'add_css', :id => @theme.id) %>
+    <%= modal_button :add, _('New CSS'), :action => 'add_css', :id => @theme.id %>
   <% end %>
 </div>
  
@@ -25,10 +25,10 @@
   <ul>
     <% for image in @image_files %>
       <li><%= image_tag("/user_themes/#{@theme.id}/images/#{image}") %></li>
-    <% end %> 
+    <% end %>
   </ul>
   <% button_bar do %>
-    <%= lightbox_button(:add, _('Add image'), :action => 'add_image', :id =>  @theme.id) %>
+    <%= modal_button :add, _('Add image'), :action => 'add_image', :id =>  @theme.id %>
   <% end %>
 </div>
  
@@ -42,7 +42,7 @@
  
 <% button_bar do %>
   <% if environment.enabled?('user_themes')  %>
-    <%= lightbox_button(:add, _('New theme ...'), :action => 'new') %>
+    <%= modal_button :add, _('New theme ...'), :action => 'new' %>
   <% end %>
   <%= button(:back, _('Back'), :controller => 'profile_editor', :action => 'index') %>
 <% end %>
@@ -20,7 +20,7 @@
         </li>
  
         <li>
-        <%= lightbox_link_to('<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new') %>
+        <%= modal_link_to '<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new' %>
         </li>
  
         <li id='manage-enterprises-link-template' style='display: none'><a href='/myprofile/{identifier}'><span class="icon-menu-enterprise"></span><%= _('Manage %s') % '{name}' %></a></li>
@@ -58,9 +58,9 @@
       <% if theme_option( :menu_login ) == 'full_form' %>
         <%= render :file => 'account/login_block' %>
       <% else %>
-        <%= thickbox_inline_popup_link('<span class="icon-menu-login"></span>'+ _('Login'), login_url, 'inlineLoginBox', :id => 'link_login') %>
+        <%= modal_inline_link_to('<span class="icon-menu-login"></span>'+ _('Login'), login_url, '#inlineLoginBox', :id => 'link_login') %>
         <div id='inlineLoginBox' style='display: none;'>
-          <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
+          <%= render :file => 'account/login', :locals => { :is_popin => true } %>
         </div>
       <% end %>
     <% end %>
@@ -25,7 +25,7 @@
 .edit-information {
   display: none;
 }
-#colorbox .edit-information {
+.modal .edit-information {
   display: block;
 }
  
@@ -26,7 +26,7 @@
   <%= labelled_radio_button 'Multiple Select', "fields[#{counter}][kind]", 'multiple_select', field.multiple && field.list %><br />
  
   <% button_bar do %>
-    <%= button :ok, c_('Ok'), '#', :class => 'colorbox-ok-button', :div_id => elem_id %>
+    <%= button :ok, _('Ok'), '#', :div_id => elem_id %>
   <% end %>
 </div>
  
@@ -290,14 +290,11 @@ function Cart(config) {
         log.error('Send request - HTTP '+status, errorThrown);
       },
       complete: function() {
-        $.colorbox.close();
+        noosfero.modal.close();
       }
     });
   }
  
-  Cart.colorbox_close = function() {
-    $.colorbox.close();
-  }
  
   $(window).bind('beforeunload', function(){
     log('Page unload.');
@@ -5,7 +5,7 @@
       <a href="cart:clean" onclick="Cart.clean(this); return false" class="cart-clean"><%=_('Clean basket')%></a>
       <ul class="cart-items"></ul>
       <div class="cart-total"><%=_('Total:')%> <b></b></div>
-      <a href="/plugin/shopping_cart/buy" class="cart-buy colorbox"><%=_('Shopping checkout')%></a>
+      <a href="/plugin/shopping_cart/buy" class="cart-buy modal"><%=_('Shopping checkout')%></a>
     </div>
     <a href="#" onclick="Cart.toggle(this); return false" class="cart-toggle">
       <span class="str-show"><%=_('Show basket')%></span>
@@ -24,7 +24,7 @@
   <% end %>
   <% delivery_option = @settings.delivery_options.first && @settings.delivery_options.first.first %>
   <%= items_table(@cart[:items], @profile, delivery_option) %>
-  <%= link_to '', '#', :onclick => "Cart.colorbox_close(this);", :class => 'cart-box-close icon-cancel' %>
+  <%= link_to_function '', "noosfero.modal.close();", :class => 'cart-box-close icon-cancel' %>
 </div>
  
 <%= javascript_include_tag '../plugins/shopping_cart/buy' %>
@@ -17,7 +17,7 @@
     </div>
   <% end %>
   <%= items_table(session[:cart][:items], profile) %>
-  <%= link_to '', '#', :onclick => "Cart.colorbox_close(this);", :class => 'cart-box-close icon-cancel' %>
+  <%= link_to_function '', "noosfero.modal.close();", :class => 'cart-box-close icon-cancel' %>
 </div>
  
 <script type="text/javascript">
@@ -55,9 +55,10 @@ $(&quot;#usp_id_field&quot;).observe_field(1, function(){
 });
  
 function displayValidationUspIdError(error){
-  jQuery.colorbox({html: '<h2>'+error.message+'</h2>'+error.backtrace.join("<br />"),
+  noosfero.modal.html('<h2>'+error.message+'</h2>'+error.backtrace.join("<br />"), {
     height: "80%",
-    width:  "70%" });
+    width:  "70%"
+  });
 }
  
 jQuery('#usp_id_field').focus(function() { jQuery('#usp-id-balloon').fadeIn('slow'); });
@@ -1005,31 +1005,6 @@ log.error = function() {
   window.log.apply(window, jQuery.merge(['error'], arguments));
 }
  
-jQuery(function($) {
-  $('.colorbox').live('click', function() {
-    $.colorbox({
-      href:       $(this).attr('href'),
-      maxWidth:   $(window).width()-50,
-      height:     $(window).height()-50,
-      open:       true,
-      fixed:      true,
-      close:      'Cancel',
-      onComplete: function(bt) {
-        var opt = {}, maxH = $(window).height()-50;
-        if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
-        $.colorbox.resize(opt);
-      }
-    });
-    return false;
-  });
-
-  $('.colorbox-close').live('click', function() {
-    $.colorbox.close();
-    return false;
-  });
-
-});
-
 function showHideTermsOfUse() {
   if( jQuery("#article_has_terms_of_use").attr("checked") )
     jQuery("#text_area_terms_of_use").show();
@@ -88,7 +88,7 @@ jQuery(function($) {
     var $item = $(this).closest('.item');
     var html_selector = $item.attr('data-item');
     insert_item_in_text($item.find(html_selector));
-    $.colorbox.close();
+    noosfero.modal.close();
     return false;
   });
   $('a.zoom').live('click', function() {
@@ -96,14 +96,13 @@ jQuery(function($) {
     var html_selector = $item.attr('data-item');
     var name = $item.attr('title');
     var img = $item.find(html_selector).find('img').attr('src');
-    $.colorbox({
-      html: zoom_dialog_html(name, img),
-      scrolling: false
+    noosfero.modal.html(zoom_dialog_html(img), {
+      scrolling: false,
     });
     return false;
   });
   $('a.close').live('click', function() {
-    $.colorbox.close();
+    noosfero.modal.close();
     return false;
   })
  
@@ -1,814 +0,0 @@
-// ColorBox v1.3.16 - a full featured, light-weight, customizable lightbox based on jQuery 1.3+
-// Copyright (c) 2011 Jack Moore - jack@colorpowered.com
-// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
-(function ($, document, window) {
-	var
-	// ColorBox Default Settings.	
-	// See http://colorpowered.com/colorbox for details.
-	defaults = {
-		transition: "elastic",
-		speed: 300,
-		width: false,
-		initialWidth: "600",
-		innerWidth: false,
-		maxWidth: false,
-		height: false,
-		initialHeight: "450",
-		innerHeight: false,
-		maxHeight: false,
-		scalePhotos: true,
-		scrolling: true,
-		inline: false,
-		html: false,
-		iframe: false,
-		fastIframe: true,
-		photo: false,
-		href: false,
-		title: false,
-		rel: false,
-		opacity: 0.9,
-		preloading: true,
-		current: "image {current} of {total}",
-		previous: "previous",
-		next: "next",
-		close: "close",
-		open: false,
-		returnFocus: true,
-		loop: true,
-		slideshow: false,
-		slideshowAuto: true,
-		slideshowSpeed: 2500,
-		slideshowStart: "start slideshow",
-		slideshowStop: "stop slideshow",
-		onOpen: false,
-		onLoad: false,
-		onComplete: false,
-		onCleanup: false,
-		onClosed: false,
-		overlayClose: true,		
-		escKey: true,
-		arrowKey: true
-	},
-	
-	// Abstracting the HTML and event identifiers for easy rebranding
-	colorbox = 'colorbox',
-	prefix = 'cbox',
-	
-	// Events	
-	event_open = prefix + '_open',
-	event_load = prefix + '_load',
-	event_complete = prefix + '_complete',
-	event_cleanup = prefix + '_cleanup',
-	event_closed = prefix + '_closed',
-	event_purge = prefix + '_purge',
-	
-	// Special Handling for IE
-	isIE = $.browser.msie && !$.support.opacity, // feature detection alone gave a false positive on at least one phone browser and on some development versions of Chrome.
-	isIE6 = isIE && $.browser.version < 7,
-	event_ie6 = prefix + '_IE6',
-
-	// Cached jQuery Object Variables
-	$overlay,
-	$box,
-	$wrap,
-	$content,
-	$topBorder,
-	$leftBorder,
-	$rightBorder,
-	$bottomBorder,
-	$related,
-	$window,
-	$loaded,
-	$loadingBay,
-	$loadingOverlay,
-	$title,
-	$current,
-	$slideshow,
-	$next,
-	$prev,
-	$close,
-	$groupControls,
-
-	// Variables for cached values or use across multiple functions
-	settings = {},
-	interfaceHeight,
-	interfaceWidth,
-	loadedHeight,
-	loadedWidth,
-	element,
-	index,
-	photo,
-	open,
-	active,
-	closing = false,
-	
-	publicMethod,
-	boxElement = prefix + 'Element';
-	
-	// ****************
-	// HELPER FUNCTIONS
-	// ****************
-
-	// jQuery object generator to reduce code size
-	function $div(id, cssText) { 
-		var div = document.createElement('div');
-		if (id) {
-            div.id = prefix + id;
-        }
-		div.style.cssText = cssText || false;
-		return $(div);
-	}
-
-	// Convert % values to pixels
-	function setSize(size, dimension) {
-		dimension = dimension === 'x' ? $window.width() : $window.height();
-		return (typeof size === 'string') ? Math.round((/%/.test(size) ? (dimension / 100) * parseInt(size, 10) : parseInt(size, 10))) : size;
-	}
-	
-	// Checks an href to see if it is a photo.
-	// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
-	function isImage(url) {
-		return settings.photo || /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
-	}
-	
-	// Assigns function results to their respective settings.  This allows functions to be used as values.
-	function process(settings) {
-		for (var i in settings) {
-			if ($.isFunction(settings[i]) && i.substring(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
-			    settings[i] = settings[i].call(element);
-			}
-		}
-		settings.rel = settings.rel || element.rel || 'nofollow';
-		settings.href = $.trim(settings.href || $(element).attr('href'));
-		settings.title = settings.title || element.title;
-	}
-
-	function trigger(event, callback) {
-		if (callback) {
-			callback.call(element);
-		}
-		$.event.trigger(event);
-	}
-
-	// Slideshow functionality
-	function slideshow() {
-		var
-		timeOut,
-		className = prefix + "Slideshow_",
-		click = "click." + prefix,
-		start,
-		stop,
-		clear;
-		
-		if (settings.slideshow && $related[1]) {
-			start = function () {
-				$slideshow
-					.text(settings.slideshowStop)
-					.unbind(click)
-					.bind(event_complete, function () {
-						if (index < $related.length - 1 || settings.loop) {
-							timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
-						}
-					})
-					.bind(event_load, function () {
-						clearTimeout(timeOut);
-					})
-					.one(click + ' ' + event_cleanup, stop);
-				$box.removeClass(className + "off").addClass(className + "on");
-				timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
-			};
-			
-			stop = function () {
-				clearTimeout(timeOut);
-				$slideshow
-					.text(settings.slideshowStart)
-					.unbind([event_complete, event_load, event_cleanup, click].join(' '))
-					.one(click, start);
-				$box.removeClass(className + "on").addClass(className + "off");
-			};
-			
-			if (settings.slideshowAuto) {
-				start();
-			} else {
-				stop();
-			}
-		}
-	}
-
-	function launch(elem) {
-		if (!closing) {
-			
-			element = elem;
-			
-			process($.extend(settings, $.data(element, colorbox)));
-			
-			$related = $(element);
-			
-			index = 0;
-			
-			if (settings.rel !== 'nofollow') {
-				$related = $('.' + boxElement).filter(function () {
-					var relRelated = $.data(this, colorbox).rel || this.rel;
-					return (relRelated === settings.rel);
-				});
-				index = $related.index(element);
-				
-				// Check direct calls to ColorBox.
-				if (index === -1) {
-					$related = $related.add(element);
-					index = $related.length - 1;
-				}
-			}
-			
-			if (!open) {
-				open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
-				
-				$box.show();
-				
-				if (settings.returnFocus) {
-					try {
-						element.blur();
-						$(element).one(event_closed, function () {
-							try {
-								this.focus();
-							} catch (e) {
-								// do nothing
-							}
-						});
-					} catch (e) {
-						// do nothing
-					}
-				}
-				
-				// +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5'
-				$overlay.css({"opacity": +settings.opacity, "cursor": settings.overlayClose ? "pointer" : "auto"}).show();
-				
-				// Opens inital empty ColorBox prior to content being loaded.
-				settings.w = setSize(settings.initialWidth, 'x');
-				settings.h = setSize(settings.initialHeight, 'y');
-				publicMethod.position(0);
-				
-				if (isIE6) {
-					$window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () {
-						$overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
-					}).trigger('resize.' + event_ie6);
-				}
-				
-				trigger(event_open, settings.onOpen);
-				
-				$groupControls.add($title).hide();
-				
-				$close.html(settings.close).show();
-			}
-			
-			publicMethod.load(true);
-		}
-	}
-
-	// ****************
-	// PUBLIC FUNCTIONS
-	// Usage format: $.fn.colorbox.close();
-	// Usage from within an iframe: parent.$.fn.colorbox.close();
-	// ****************
-	
-	publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
-		var $this = this, autoOpen;
-		
-		if (!$this[0] && $this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit.
-			return $this;
-		}
-		
-		options = options || {};
-		
-		if (callback) {
-			options.onComplete = callback;
-		}
-		
-		if (!$this[0] || $this.selector === undefined) { // detects $.colorbox() and $.fn.colorbox()
-			$this = $('<a/>');
-			options.open = true; // assume an immediate open
-		}
-		
-		$this.each(function () {
-			$.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
-			$(this).addClass(boxElement);
-		});
-		
-		autoOpen = options.open;
-		
-		if ($.isFunction(autoOpen)) {
-			autoOpen = autoOpen.call($this);
-		}
-		
-		if (autoOpen) {
-			launch($this[0]);
-		}
-		
-		return $this;
-	};
-
-	// Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
-	// This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only
-	// having to run once, instead of each time colorbox is opened.
-	publicMethod.init = function () {
-		// Create & Append jQuery Objects
-		$window = $(window);
-		$box = $div().attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''});
-		$overlay = $div("Overlay", isIE6 ? 'position:absolute' : '').hide();
-		
-		$wrap = $div("Wrapper");
-		$content = $div("Content").append(
-			$loaded = $div("LoadedContent", 'width:0; height:0; overflow:hidden'),
-			$loadingOverlay = $div("LoadingOverlay").add($div("LoadingGraphic")),
-			$title = $div("Title"),
-			$current = $div("Current"),
-			$next = $div("Next"),
-			$prev = $div("Previous"),
-			$slideshow = $div("Slideshow").bind(event_open, slideshow),
-			$close = $div("Close")
-		);
-		$wrap.append( // The 3x3 Grid that makes up ColorBox
-			$div().append(
-				$div("TopLeft"),
-				$topBorder = $div("TopCenter"),
-				$div("TopRight")
-			),
-			$div(false, 'clear:left').append(
-				$leftBorder = $div("MiddleLeft"),
-				$content,
-				$rightBorder = $div("MiddleRight")
-			),
-			$div(false, 'clear:left').append(
-				$div("BottomLeft"),
-				$bottomBorder = $div("BottomCenter"),
-				$div("BottomRight")
-			)
-		).children().children().css({'float': 'left'});
-		
-		$loadingBay = $div(false, 'position:absolute; width:9999px; visibility:hidden; display:none');
-		
-		$('body').prepend($overlay, $box.append($wrap, $loadingBay));
-		
-		$content.children()
-		.hover(function () {
-			$(this).addClass('hover');
-		}, function () {
-			$(this).removeClass('hover');
-		}).addClass('hover');
-		
-		// Cache values needed for size calculations
-		interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
-		interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
-		loadedHeight = $loaded.outerHeight(true);
-		loadedWidth = $loaded.outerWidth(true);
-		
-		// Setting padding to remove the need to do size conversions during the animation step.
-		$box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide();
-		
-                // Setup button events.
-                $next.click(function () {
-                        publicMethod.next();
-                });
-                $prev.click(function () {
-                        publicMethod.prev();
-                });
-                $close.click(function () {
-                        publicMethod.close();
-                });
-		
-		$groupControls = $next.add($prev).add($current).add($slideshow);
-		
-		// Adding the 'hover' class allowed the browser to load the hover-state
-		// background graphics.  The class can now can be removed.
-		$content.children().removeClass('hover');
-		
-		$('.' + boxElement).live('click', function (e) {
-			// checks to see if it was a non-left mouse-click and for clicks modified with ctrl, shift, or alt.
-			if (!((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey)) {
-				e.preventDefault();
-				launch(this);
-			}
-		});
-		
-		$overlay.click(function () {
-			if (settings.overlayClose) {
-				publicMethod.close();
-			}
-		});
-		
-		// Set Navigation Key Bindings
-		$(document).bind('keydown.' + prefix, function (e) {
-                        var key = e.keyCode;
-			if (open && settings.escKey && key === 27) {
-				e.preventDefault();
-				publicMethod.close();
-			}
-			if (open && settings.arrowKey && $related[1]) {
-				if (key === 37) {
-					e.preventDefault();
-					$prev.click();
-				} else if (key === 39) {
-					e.preventDefault();
-					$next.click();
-				}
-			}
-		});
-	};
-	
-	publicMethod.remove = function () {
-		$box.add($overlay).remove();
-		$('.' + boxElement).die('click').removeData(colorbox).removeClass(boxElement);
-	};
-
-	publicMethod.position = function (speed, loadedCallback) {
-		var
-		animate_speed,
-		// keeps the top and left positions within the browser's viewport.
-		posTop = Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop(),
-		posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft();
-		
-		// setting the speed to 0 to reduce the delay between same-sized content.
-		animate_speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed;
-		
-		// this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
-		// but it has to be shrank down around the size of div#colorbox when it's done.  If not,
-		// it can invoke an obscure IE bug when using iframes.
-		$wrap[0].style.width = $wrap[0].style.height = "9999px";
-		
-		function modalDimensions(that) {
-			// loading overlay height has to be explicitly set for IE6.
-			$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
-			$loadingOverlay[0].style.height = $loadingOverlay[1].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
-		}
-		
-		$box.dequeue().animate({width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: posTop, left: posLeft}, {
-			duration: animate_speed,
-			complete: function () {
-				modalDimensions(this);
-				
-				active = false;
-				
-				// shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
-				$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
-				$wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
-				
-				if (loadedCallback) {
-					loadedCallback();
-				}
-			},
-			step: function () {
-				modalDimensions(this);
-			}
-		});
-	};
-
-	publicMethod.resize = function (options) {
-		if (open) {
-			options = options || {};
-			
-			if (options.width) {
-				settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
-			}
-			if (options.innerWidth) {
-				settings.w = setSize(options.innerWidth, 'x');
-			}
-			$loaded.css({width: settings.w});
-			
-			if (options.height) {
-				settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
-			}
-			if (options.innerHeight) {
-				settings.h = setSize(options.innerHeight, 'y');
-			}
-			if (!options.innerHeight && !options.height) {				
-				var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
-				settings.h = $child.height();
-				$child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
-			}
-			$loaded.css({height: settings.h});
-			
-			publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
-		}
-	};
-
-	publicMethod.prep = function (object) {
-		if (!open) {
-			return;
-		}
-		
-		var speed = settings.transition === "none" ? 0 : settings.speed;
-		
-		$window.unbind('resize.' + prefix);
-		$loaded.remove();
-		$loaded = $div('LoadedContent').html(object);
-		
-		function getWidth() {
-			settings.w = settings.w || $loaded.width();
-			settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
-			return settings.w;
-		}
-		function getHeight() {
-			settings.h = settings.h || $loaded.height();
-			settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
-			return settings.h;
-		}
-		
-		$loaded.hide()
-		.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
-		.css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
-		.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
-		.prependTo($content);
-		
-		$loadingBay.hide();
-		
-		// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
-		//$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
-		
-                $(photo).css({'float': 'none'});
-                
-		// Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
-		if (isIE6) {
-			$('select').not($box.find('select')).filter(function () {
-				return this.style.visibility !== 'hidden';
-			}).css({'visibility': 'hidden'}).one(event_cleanup, function () {
-				this.style.visibility = 'inherit';
-			});
-		}
-		
-		function setPosition(s) {
-			publicMethod.position(s, function () {
-				var prev, prevSrc, next, nextSrc, total = $related.length, iframe, complete;
-				
-				if (!open) {
-					return;
-				}
-				
-				complete = function () {
-					$loadingOverlay.hide();
-					trigger(event_complete, settings.onComplete);
-				};
-				
-				if (isIE) {
-					//This fadeIn helps the bicubic resampling to kick-in.
-					if (photo) {
-						$loaded.fadeIn(100);
-					}
-				}
-				
-				$title.html(settings.title).add($loaded).show();
-				
-				if (total > 1) { // handle grouping
-					if (typeof settings.current === "string") {
-						$current.html(settings.current.replace(/\{current\}/, index + 1).replace(/\{total\}/, total)).show();
-					}
-					
-					$next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
-					$prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
-					
-					prev = index ? $related[index - 1] : $related[total - 1];
-					next = index < total - 1 ? $related[index + 1] : $related[0];
-					
-					if (settings.slideshow) {
-						$slideshow.show();
-					}
-					
-					// Preloads images within a rel group
-					if (settings.preloading) {
-						nextSrc = $.data(next, colorbox).href || next.href;
-						prevSrc = $.data(prev, colorbox).href || prev.href;
-						
-						nextSrc = $.isFunction(nextSrc) ? nextSrc.call(next) : nextSrc;
-						prevSrc = $.isFunction(prevSrc) ? prevSrc.call(prev) : prevSrc;
-						
-						if (isImage(nextSrc)) {
-							$('<img/>')[0].src = nextSrc;
-						}
-						
-						if (isImage(prevSrc)) {
-							$('<img/>')[0].src = prevSrc;
-						}
-					}
-				} else {
-					$groupControls.hide();
-				}
-				
-				if (settings.iframe) {
-					iframe = $('<iframe/>').addClass(prefix + 'Iframe')[0];
-					
-					if (settings.fastIframe) {
-						complete();
-					} else {
-						$(iframe).load(complete);
-					}
-					iframe.name = prefix + (+new Date());
-					iframe.src = settings.href;
-					
-					if (!settings.scrolling) {
-						iframe.scrolling = "no";
-					}
-					
-					if (isIE) {
-                        iframe.frameBorder=0;
-						iframe.allowTransparency = "true";
-					}
-					
-					$(iframe).appendTo($loaded).one(event_purge, function () {
-						iframe.src = "//about:blank";
-					});
-				} else {
-					complete();
-				}
-				
-				if (settings.transition === 'fade') {
-					$box.fadeTo(speed, 1, function () {
-						$box[0].style.filter = "";
-					});
-				} else {
-                     $box[0].style.filter = "";
-				}
-				
-				$window.bind('resize.' + prefix, function () {
-					publicMethod.position(0);
-				});
-			});
-		}
-		
-		if (settings.transition === 'fade') {
-			$box.fadeTo(speed, 0, function () {
-				setPosition(0);
-			});
-		} else {
-			setPosition(speed);
-		}
-	};
-
-	publicMethod.load = function (launched) {
-		var href, setResize, prep = publicMethod.prep;
-		
-		active = true;
-		
-		photo = false;
-		
-		element = $related[index];
-		
-		if (!launched) {
-			process($.extend(settings, $.data(element, colorbox)));
-		}
-		
-		trigger(event_purge);
-		
-		trigger(event_load, settings.onLoad);
-		
-		settings.h = settings.height ?
-				setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
-				settings.innerHeight && setSize(settings.innerHeight, 'y');
-		
-		settings.w = settings.width ?
-				setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
-				settings.innerWidth && setSize(settings.innerWidth, 'x');
-		
-		// Sets the minimum dimensions for use in image scaling
-		settings.mw = settings.w;
-		settings.mh = settings.h;
-		
-		// Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
-		// If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
-		if (settings.maxWidth) {
-			settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
-			settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
-		}
-		if (settings.maxHeight) {
-			settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
-			settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
-		}
-		
-		href = settings.href;
-		
-		$loadingOverlay.show();
-
-		if (settings.inline) {
-			// Inserts an empty placeholder where inline content is being pulled from.
-			// An event is bound to put inline content back when ColorBox closes or loads new content.
-			$div().hide().insertBefore($(href)[0]).one(event_purge, function () {
-				$(this).replaceWith($loaded.children());
-			});
-			prep($(href));
-		} else if (settings.iframe) {
-			// IFrame element won't be added to the DOM until it is ready to be displayed,
-			// to avoid problems with DOM-ready JS that might be trying to run in that iframe.
-			prep(" ");
-		} else if (settings.html) {
-			prep(settings.html);
-		} else if (isImage(href)) {
-			$(photo = new Image())
-			.addClass(prefix + 'Photo')
-			.error(function () {
-				settings.title = false;
-				prep($div('Error').text('This image could not be loaded'));
-			})
-			.load(function () {
-				var percent;
-				photo.onload = null; //stops animated gifs from firing the onload repeatedly.
-				
-				if (settings.scalePhotos) {
-					setResize = function () {
-						photo.height -= photo.height * percent;
-						photo.width -= photo.width * percent;	
-					};
-					if (settings.mw && photo.width > settings.mw) {
-						percent = (photo.width - settings.mw) / photo.width;
-						setResize();
-					}
-					if (settings.mh && photo.height > settings.mh) {
-						percent = (photo.height - settings.mh) / photo.height;
-						setResize();
-					}
-				}
-				
-				if (settings.h) {
-					photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px';
-				}
-				
-				if ($related[1] && (index < $related.length - 1 || settings.loop)) {
-					photo.style.cursor = 'pointer';
-					photo.onclick = function () {
-                                                publicMethod.next();
-                                        };
-				}
-				
-				if (isIE) {
-					photo.style.msInterpolationMode = 'bicubic';
-				}
-				
-				setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
-					prep(photo);
-				}, 1);
-			});
-			
-			setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
-				photo.src = href;
-			}, 1);
-		} else if (href) {
-			$loadingBay.load(href, function (data, status, xhr) {
-				prep(status === 'error' ? $div('Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents());
-			});
-		}
-	};
-        
-	// Navigates to the next page/image in a set.
-	publicMethod.next = function () {
-		if (!active && $related[1] && (index < $related.length - 1 || settings.loop)) {
-			index = index < $related.length - 1 ? index + 1 : 0;
-			publicMethod.load();
-		}
-	};
-	
-	publicMethod.prev = function () {
-		if (!active && $related[1] && (index || settings.loop)) {
-			index = index ? index - 1 : $related.length - 1;
-			publicMethod.load();
-		}
-	};
-
-	// Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
-	publicMethod.close = function () {
-		if (open && !closing) {
-			
-			closing = true;
-			
-			open = false;
-			
-			trigger(event_cleanup, settings.onCleanup);
-			
-			$window.unbind('.' + prefix + ' .' + event_ie6);
-			
-			$overlay.fadeTo(200, 0);
-			
-			$box.stop().fadeTo(300, 0, function () {
-                                
-				$box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
-				
-				trigger(event_purge);
-				
-				$loaded.remove();
-				
-				setTimeout(function () {
-					closing = false;
-					trigger(event_closed, settings.onClosed);
-				}, 1);
-			});
-		}
-	};
-
-	// A method for fetching the current element ColorBox is referencing.
-	// returns a jQuery object.
-	publicMethod.element = function () {
-		return $(element);
-	};
-
-	publicMethod.settings = defaults;
-
-	// Initializes ColorBox when the DOM has loaded
-	$(publicMethod.init);
-
-}(jQuery, document, this));
 \ No newline at end of file
@@ -53,7 +53,7 @@ function save_comment(button) {
       //Comment of reply
       $('#'+ data.render_target).replaceWith(data.html);
       $('#' + data.render_target).effect("highlight", {}, 3000);
-      $.colorbox.close();
+      noosfero.modal.close();
       increment_comment_count(comment_div);
     } else {
       //New comment of article
@@ -64,7 +64,7 @@ function save_comment(button) {
       });
  
       page_comment_form.find('.errorExplanation').remove();
-      $.colorbox.close();
+      noosfero.modal.close();
       increment_comment_count(comment_div);
     }
  
@@ -0,0 +1,7 @@
+/*!
+	Colorbox v1.4.36 - 2014-02-01
+	jQuery lightbox and modal window plugin
+	(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function(e,t,i){function o(i,o,n){var r=t.createElement(i);return o&&(r.id=Z+o),n&&(r.style.cssText=n),e(r)}function n(){return i.innerHeight?i.innerHeight:e(i).height()}function r(e){var t=k.length,i=(z+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?E.width():n())/100:1)*parseInt(e,10))}function l(e,t){return e.photo||e.photoRegex.test(t)}function s(e,t){return e.retinaUrl&&i.devicePixelRatio>1?t.replace(e.photoRegex,e.retinaSuffix):t}function a(e){"contains"in g[0]&&!g[0].contains(e.target)&&(e.stopPropagation(),g.focus())}function d(){var t,i=e.data(N,Y);null==i?(B=e.extend({},X),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},i);for(t in B)e.isFunction(B[t])&&"on"!==t.slice(0,2)&&(B[t]=B[t].call(N));B.rel=B.rel||N.rel||e(N).data("rel")||"nofollow",B.href=B.href||e(N).attr("href"),B.title=B.title||N.title,"string"==typeof B.href&&(B.href=e.trim(B.href))}function c(i,o){e(t).trigger(i),lt.triggerHandler(i),e.isFunction(o)&&o.call(N)}function u(i){q||(N=i,d(),k=e(N),z=0,"nofollow"!==B.rel&&(k=e("."+et).filter(function(){var t,i=e.data(this,Y);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===B.rel}),z=k.index(N),-1===z&&(k=k.add(N),z=k.length-1)),w.css({opacity:parseFloat(B.opacity),cursor:B.overlayClose?"pointer":"auto",visibility:"visible"}).show(),J&&g.add(w).removeClass(J),B.className&&g.add(w).addClass(B.className),J=B.className,B.closeButton?K.html(B.close).appendTo(y):K.appendTo("<div/>"),U||(U=$=!0,g.css({visibility:"hidden",display:"block"}),H=o(st,"LoadedContent","width:0; height:0; overflow:hidden"),y.css({width:"",height:""}).append(H),O=x.height()+C.height()+y.outerHeight(!0)-y.height(),_=b.width()+T.width()+y.outerWidth(!0)-y.width(),D=H.outerHeight(!0),A=H.outerWidth(!0),B.w=h(B.initialWidth,"x"),B.h=h(B.initialHeight,"y"),H.css({width:"",height:B.h}),Q.position(),c(tt,B.onOpen),P.add(L).hide(),g.focus(),B.trapFocus&&t.addEventListener&&(t.addEventListener("focus",a,!0),lt.one(rt,function(){t.removeEventListener("focus",a,!0)})),B.returnFocus&&lt.one(rt,function(){e(N).focus()})),m())}function f(){!g&&t.body&&(V=!1,E=e(i),g=o(st).attr({id:Y,"class":e.support.opacity===!1?Z+"IE":"",role:"dialog",tabindex:"-1"}).hide(),w=o(st,"Overlay").hide(),F=e([o(st,"LoadingOverlay")[0],o(st,"LoadingGraphic")[0]]),v=o(st,"Wrapper"),y=o(st,"Content").append(L=o(st,"Title"),S=o(st,"Current"),I=e('<button type="button"/>').attr({id:Z+"Previous"}),R=e('<button type="button"/>').attr({id:Z+"Next"}),M=o("button","Slideshow"),F),K=e('<button type="button"/>').attr({id:Z+"Close"}),v.append(o(st).append(o(st,"TopLeft"),x=o(st,"TopCenter"),o(st,"TopRight")),o(st,!1,"clear:left").append(b=o(st,"MiddleLeft"),y,T=o(st,"MiddleRight")),o(st,!1,"clear:left").append(o(st,"BottomLeft"),C=o(st,"BottomCenter"),o(st,"BottomRight"))).find("div div").css({"float":"left"}),W=o(st,!1,"position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;"),P=R.add(I).add(S).add(M),e(t.body).append(w,g.append(v,W)))}function p(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||e.ctrlKey||(e.preventDefault(),u(this))}return g?(V||(V=!0,R.click(function(){Q.next()}),I.click(function(){Q.prev()}),K.click(function(){Q.close()}),w.click(function(){B.overlayClose&&Q.close()}),e(t).bind("keydown."+Z,function(e){var t=e.keyCode;U&&B.escKey&&27===t&&(e.preventDefault(),Q.close()),U&&B.arrowKey&&k[1]&&!e.altKey&&(37===t?(e.preventDefault(),I.click()):39===t&&(e.preventDefault(),R.click()))}),e.isFunction(e.fn.on)?e(t).on("click."+Z,"."+et,i):e("."+et).live("click."+Z,i)),!0):!1}function m(){var n,r,a,u=Q.prep,f=++at;$=!0,j=!1,N=k[z],d(),c(ht),c(it,B.onLoad),B.h=B.height?h(B.height,"y")-D-O:B.innerHeight&&h(B.innerHeight,"y"),B.w=B.width?h(B.width,"x")-A-_:B.innerWidth&&h(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=h(B.maxWidth,"x")-A-_,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=h(B.maxHeight,"y")-D-O,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,G=setTimeout(function(){F.show()},100),B.inline?(a=o(st).hide().insertBefore(e(n)[0]),lt.one(ht,function(){a.replaceWith(H.children())}),u(e(n))):B.iframe?u(" "):B.html?u(B.html):l(B,n)?(n=s(B,n),j=t.createElement("img"),e(j).addClass(Z+"Photo").bind("error",function(){B.title=!1,u(o(st,"Error").html(B.imgError))}).one("load",function(){var t;f===at&&(e.each(["alt","longdesc","aria-describedby"],function(t,i){var o=e(N).attr(i)||e(N).attr("data-"+i);o&&j.setAttribute(i,o)}),B.retinaImage&&i.devicePixelRatio>1&&(j.height=j.height/i.devicePixelRatio,j.width=j.width/i.devicePixelRatio),B.scalePhotos&&(r=function(){j.height-=j.height*t,j.width-=j.width*t},B.mw&&j.width>B.mw&&(t=(j.width-B.mw)/j.width,r()),B.mh&&j.height>B.mh&&(t=(j.height-B.mh)/j.height,r())),B.h&&(j.style.marginTop=Math.max(B.mh-j.height,0)/2+"px"),k[1]&&(B.loop||k[z+1])&&(j.style.cursor="pointer",j.onclick=function(){Q.next()}),j.style.width=j.width+"px",j.style.height=j.height+"px",setTimeout(function(){u(j)},1))}),setTimeout(function(){j.src=n},1)):n&&W.load(n,B.data,function(t,i){f===at&&u("error"===i?o(st,"Error").html(B.xhrError):e(this).contents())})}var w,g,v,y,x,b,T,C,k,E,H,W,F,L,S,M,R,I,K,P,B,O,_,D,A,N,z,j,U,$,q,G,Q,J,V,X={html:!1,photo:!1,iframe:!1,inline:!1,transition:"elastic",speed:300,fadeOut:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,className:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0,closeButton:!0,fastIframe:!0,open:!1,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",photoRegex:/\.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|\?).*)?$/i,retinaImage:!1,retinaUrl:!1,retinaSuffix:"@2x.$1",current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",returnFocus:!0,trapFocus:!0,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1},Y="colorbox",Z="cbox",et=Z+"Element",tt=Z+"_open",it=Z+"_load",ot=Z+"_complete",nt=Z+"_cleanup",rt=Z+"_closed",ht=Z+"_purge",lt=e("<a/>"),st="div",at=0,dt={},ct=function(){function e(){clearTimeout(h)}function t(){(B.loop||k[z+1])&&(e(),h=setTimeout(Q.next,B.slideshowSpeed))}function i(){M.html(B.slideshowStop).unbind(s).one(s,o),lt.bind(ot,t).bind(it,e),g.removeClass(l+"off").addClass(l+"on")}function o(){e(),lt.unbind(ot,t).unbind(it,e),M.html(B.slideshowStart).unbind(s).one(s,function(){Q.next(),i()}),g.removeClass(l+"on").addClass(l+"off")}function n(){r=!1,M.hide(),e(),lt.unbind(ot,t).unbind(it,e),g.removeClass(l+"off "+l+"on")}var r,h,l=Z+"Slideshow_",s="click."+Z;return function(){r?B.slideshow||(lt.unbind(nt,n),n()):B.slideshow&&k[1]&&(r=!0,lt.one(nt,n),B.slideshowAuto?i():o(),M.show())}}();e.colorbox||(e(f),Q=e.fn[Y]=e[Y]=function(t,i){var o=this;if(t=t||{},f(),p()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,Y,e.extend({},e.data(this,Y)||X,t))}).addClass(et),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&u(o[0])}return o},Q.position=function(t,i){function o(){x[0].style.width=C[0].style.width=y[0].style.width=parseInt(g[0].style.width,10)-_+"px",y[0].style.height=b[0].style.height=T[0].style.height=parseInt(g[0].style.height,10)-O+"px"}var r,l,s,a=0,d=0,c=g.offset();if(E.unbind("resize."+Z),g.css({top:-9e4,left:-9e4}),l=E.scrollTop(),s=E.scrollLeft(),B.fixed?(c.top-=l,c.left-=s,g.css({position:"fixed"})):(a=l,d=s,g.css({position:"absolute"})),d+=B.right!==!1?Math.max(E.width()-B.w-A-_-h(B.right,"x"),0):B.left!==!1?h(B.left,"x"):Math.round(Math.max(E.width()-B.w-A-_,0)/2),a+=B.bottom!==!1?Math.max(n()-B.h-D-O-h(B.bottom,"y"),0):B.top!==!1?h(B.top,"y"):Math.round(Math.max(n()-B.h-D-O,0)/2),g.css({top:c.top,left:c.left,visibility:"visible"}),v[0].style.width=v[0].style.height="9999px",r={width:B.w+A+_,height:B.h+D+O,top:a,left:d},t){var u=0;e.each(r,function(e){return r[e]!==dt[e]?(u=t,void 0):void 0}),t=u}dt=r,t||g.css(r),g.dequeue().animate(r,{duration:t||0,complete:function(){o(),$=!1,v[0].style.width=B.w+A+_+"px",v[0].style.height=B.h+D+O+"px",B.reposition&&setTimeout(function(){E.bind("resize."+Z,Q.position)},1),i&&i()},step:o})},Q.resize=function(e){var t;U&&(e=e||{},e.width&&(B.w=h(e.width,"x")-A-_),e.innerWidth&&(B.w=h(e.innerWidth,"x")),H.css({width:B.w}),e.height&&(B.h=h(e.height,"y")-D-O),e.innerHeight&&(B.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(t=H.scrollTop(),H.css({height:"auto"}),B.h=H.height()),H.css({height:B.h}),t&&H.scrollTop(t),Q.position("none"===B.transition?0:B.speed))},Q.prep=function(i){function n(){return B.w=B.w||H.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function h(){return B.h=B.h||H.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(U){var a,d="none"===B.transition?0:B.speed;H.empty().remove(),H=o(st,"LoadedContent").append(i),H.hide().appendTo(W.show()).css({width:n(),overflow:B.scrolling?"auto":"hidden"}).css({height:h()}).prependTo(y),W.hide(),e(j).css({"float":"none"}),a=function(){function i(){e.support.opacity===!1&&g[0].style.removeAttribute("filter")}var n,h,a=k.length,u="frameBorder",f="allowTransparency";U&&(h=function(){clearTimeout(G),F.hide(),c(ot,B.onComplete)},L.html(B.title).add(H).show(),a>1?("string"==typeof B.current&&S.html(B.current.replace("{current}",z+1).replace("{total}",a)).show(),R[B.loop||a-1>z?"show":"hide"]().html(B.next),I[B.loop||z?"show":"hide"]().html(B.previous),ct(),B.preloading&&e.each([r(-1),r(1)],function(){var i,o,n=k[this],r=e.data(n,Y);r&&r.href?(i=r.href,e.isFunction(i)&&(i=i.call(n))):i=e(n).attr("href"),i&&l(r,i)&&(i=s(r,i),o=t.createElement("img"),o.src=i)})):P.hide(),B.iframe?(n=o("iframe")[0],u in n&&(n[u]=0),f in n&&(n[f]="true"),B.scrolling||(n.scrolling="no"),e(n).attr({src:B.href,name:(new Date).getTime(),"class":Z+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,mozallowfullscreen:!0}).one("load",h).appendTo(H),lt.one(ht,function(){n.src="//about:blank"}),B.fastIframe&&e(n).trigger("load")):h(),"fade"===B.transition?g.fadeTo(d,1,i):i())},"fade"===B.transition?g.fadeTo(d,0,function(){Q.position(0,a)}):Q.position(d,a)}},Q.next=function(){!$&&k[1]&&(B.loop||k[z+1])&&(z=r(1),u(k[z]))},Q.prev=function(){!$&&k[1]&&(B.loop||z)&&(z=r(-1),u(k[z]))},Q.close=function(){U&&!q&&(q=!0,U=!1,c(nt,B.onCleanup),E.unbind("."+Z),w.fadeTo(B.fadeOut||0,0),g.stop().fadeTo(B.fadeOut||0,0,function(){g.add(w).css({opacity:1,cursor:"auto"}).hide(),c(ht),H.empty().remove(),setTimeout(function(){q=!1,c(rt,B.onClosed)},1)}))},Q.remove=function(){g&&(g.stop(),e.colorbox.close(),g.stop().remove(),w.remove(),q=!1,g=null,e("."+et).removeData(Y).removeClass(et),e(t).unbind("click."+Z))},Q.element=function(){return e(N)},Q.settings=X)})(jQuery,document,window);
 \ No newline at end of file
@@ -1,232 +0,0 @@
-/*
-Created By: Chris Campbell
-Website: http://particletree.com
-Date: 2/1/2006
-
-Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
-*/
-
-/*-------------------------------GLOBAL VARIABLES------------------------------------*/
-
-var detect = navigator.userAgent.toLowerCase();
-var OS,browser,version,total,thestring;
-
-/*-----------------------------------------------------------------------------------------------*/
-
-//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
-
-function getBrowserInfo() {
-	if (checkIt('konqueror')) {
-		browser = "Konqueror";
-		OS = "Linux";
-	}
-	else if (checkIt('safari')) browser 	= "Safari"
-	else if (checkIt('omniweb')) browser 	= "OmniWeb"
-	else if (checkIt('opera')) browser 		= "Opera"
-	else if (checkIt('webtv')) browser 		= "WebTV";
-	else if (checkIt('icab')) browser 		= "iCab"
-	else if (checkIt('msie')) browser 		= "Internet Explorer"
-	else if (!checkIt('compatible')) {
-		browser = "Netscape Navigator"
-		version = detect.charAt(8);
-	}
-	else browser = "An unknown browser";
-
-	if (!version) version = detect.charAt(place + thestring.length);
-
-	if (!OS) {
-		if (checkIt('linux')) OS 		= "Linux";
-		else if (checkIt('x11')) OS 	= "Unix";
-		else if (checkIt('mac')) OS 	= "Mac"
-		else if (checkIt('win')) OS 	= "Windows"
-		else OS 								= "an unknown operating system";
-	}
-}
-
-function checkIt(string) {
-	place = detect.indexOf(string) + 1;
-	thestring = string;
-	return place;
-}
-
-/*-----------------------------------------------------------------------------------------------*/
-
-Event.observe(window, 'load', getBrowserInfo, false);
-
-var lightbox = Class.create();
-
-lightbox.prototype = {
-
-	yPos : 0,
-	xPos : 0,
-
-	initialize: function(ctrl) {
-		this.content = ctrl.href;
-		if (ctrl.id != '') {
-		    this.lightbox_className = ctrl.id;
-		}
-		ctrl.onclick = function(){return false;};
-                ctrl.lightbox = this;
-	},
-	
-	// Turn everything on - mainly the IE fixes
-	activate: function(){
-		if (browser == 'Internet Explorer'){
-			this.getScroll();
-			this.prepareIE('100%', 'hidden');
-			this.setScroll(0,0);
-			this.hideSelects('hidden');
-		}
-		this.hideObjectsAndEmbeds('hidden');
-		this.displayLightbox("block");
-	},
-	
-	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
-	prepareIE: function(height, overflow){
-		bod = document.getElementsByTagName('body')[0];
-		bod.style.height = height;
-		bod.style.overflow = overflow;
-
-		htm = document.getElementsByTagName('html')[0];
-		htm.style.height = height;
-		htm.style.overflow = overflow; 
-	},
-	
-	// In IE, select elements hover on top of the lightbox
-	hideSelects: function(visibility){
-		selects = document.getElementsByTagName('select');
-		for(i = 0; i < selects.length; i++) {
-			selects[i].style.visibility = visibility;
-		}
-	},
-
-	// In FF, objects and embeds elements hover on top of the lightbox
-	hideObjectsAndEmbeds: function(visibility){
-		var f = function(collection) {
-		  for(i = 0; i < collection.length; i++) {
-			if (collection[i].style) {
-				collection[i].style.visibility = visibility;
-			}
-		  }
-		};
-		f(document.getElementsByTagName('object'));
-		f(document.getElementsByTagName('embed'));
-	},
-
-	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
-	getScroll: function(){
-		if (self.pageYOffset) {
-			this.yPos = self.pageYOffset;
-		} else if (document.documentElement && document.documentElement.scrollTop){
-			this.yPos = document.documentElement.scrollTop; 
-		} else if (document.body) {
-			this.yPos = document.body.scrollTop;
-		}
-	},
-	
-	setScroll: function(x, y){
-		window.scrollTo(x, y); 
-	},
-	
-	displayLightbox: function(display){
-		$('overlay').style.display = display;
-		$('lightbox').style.display = display;
-		if(display != 'none') this.loadInfo();
-	},
-	
-	// Begin Ajax request based off of the href of the clicked linked
-	loadInfo: function() {
-		var myAjax = new Ajax.Request(
-	this.content,
-	{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
-		);
-		
-	},
-	
-	// Display Ajax response
-	processInfo: function(response){
-		info = "<div id='lbContent'><div id='lbBottomBG'><div id='lbTopBG'>" + response.responseText + "</div></div></div>";
-		new Insertion.Before($('lbLoadMessage'), info)
-		if (this.lightbox_className) {
-			$('lightbox').className = "done " + this.lightbox_className;
-		} else {
-			$('lightbox').className = "done";
-		}
-		this.actions();			
-	},
-	
-	// Search through new links within the lightbox, and attach click event
-	actions: function(){
-		lbActions = document.getElementsByClassName('lbAction');
-
-		for(i = 0; i < lbActions.length; i++) {
-			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
-			lbActions[i].onclick = function(){return false;};
-		}
-
-	},
-	
-	// Example of creating your own functionality once lightbox is initiated
-	insert: function(e){
-	   link = Event.element(e).parentNode;
-	   Element.remove($('lbContent'));
-	 
-	   var myAjax = new Ajax.Request(
-			  link.href,
-			  {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
-	   );
-	 
-	},
-	
-	// Example of creating your own functionality once lightbox is initiated
-	deactivate: function(){
-		Element.remove($('lbContent'));
-		
-		if (browser == "Internet Explorer"){
-			this.setScroll(0,this.yPos);
-			this.prepareIE("auto", "auto");
-			this.hideSelects("visible");
-		}
-		this.hideObjectsAndEmbeds("visible");
-		this.displayLightbox("none");
-	}
-}
-
-/*-----------------------------------------------------------------------------------------------*/
-
-jQuery('.lbOn').live('click', function(event) {
-  if (jQuery('#lbLoadMessage').length == 0)
-    addLightboxMarkup();
-  if (this.lightbox == undefined)
-    valid = new lightbox(this);
-  else {
-    removeLightboxMarkup();
-    addLightboxMarkup();
-  }
-
-  this.lightbox.activate();
-
-  event.preventDefault();
-  return false;
-});
-
-// Add in markup necessary to make this work. Basically two divs:
-// Overlay holds the shadow
-// Lightbox is the centered square that the content is put into.
-function addLightboxMarkup() {
-	bod 				= document.getElementsByTagName('body')[0];
-	overlay 			= document.createElement('div');
-	overlay.id		= 'overlay';
-	lb					= document.createElement('div');
-	lb.id				= 'lightbox';
-	lb.className 	= 'loading';
-	lb.innerHTML	= '<div id="lbLoadMessage">' +
-						  '<img src="' + noosfero_root() + '/images/2loading.gif"/>' +
-						  '</div>';
-	bod.appendChild(overlay);
-	bod.appendChild(lb);
-}
-function removeLightboxMarkup() {
-    Element.remove($('overlay'));
-    Element.remove($('lightbox'));
-}
@@ -0,0 +1,58 @@
+noosfero.modal = {
+
+  watchClass: function() {
+    jQuery(function($) {
+      $(document).delegate('.modal-toggle', 'click', function() {
+        $.colorbox({
+          href:       $(this).attr('href'),
+          maxWidth:   $(window).width()-50,
+          height:     $(window).height()-50,
+          open:       true,
+          close:      'Cancel',
+          class:      'modal',
+          onComplete: function(bt) {
+            var opt = {}, maxH = $(window).height()-50;
+            if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
+            $.colorbox.resize(opt);
+          }
+        });
+        return false;
+      });
+
+      $(document).delegate('.modal-close', 'click', function() {
+        $.colorbox.close();
+        return false;
+      });
+
+    });
+  },
+
+  inline: function(href, options) {
+    href = jQuery(href);
+    options = jQuery.extend({
+      inline: true, href: href,
+      onLoad: function(){ href.show(); },
+      onCleanup: function(){ href.hide(); },
+    }, options)
+
+    jQuery.colorbox(options);
+
+    return false;
+  },
+
+  html: function(html, options) {
+    options = jQuery.extend({
+      html: html,
+    }, options);
+
+    jQuery.colorbox(options);
+  },
+
+  close: function() {
+    jQuery.colorbox.close();
+  },
+
+};
+
+noosfero.modal.watchClass();
+
 jQuery(function($) {
   $('.report-abuse-action').live('click', function() {
     if($(this).attr('href')){
-      $.fn.colorbox({
-        href: $(this).attr('href'),
+      noosfero.modal.inline($(this).attr('href'), {
         innerHeight: '300px',
         innerWidth: '445px'
       });
@@ -1,319 +0,0 @@
-/*
- * Thickbox 3.1 - One Box To Rule Them All.
- * By Cody Lindley (http://www.codylindley.com)
- * Copyright (c) 2007 cody lindley
- * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
-*/
-		  
-var tb_pathToImage = "/images/loading.gif";
-
-/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
-
-//on page load call tb_init
-jQuery(document).ready(function(){   
-	tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
-	imgLoader = new Image();// preload image
-	imgLoader.src = noosfero_root() + tb_pathToImage;
-});
-
-//add thickbox to href & area elements that have a class of .thickbox
-function tb_init(domChunk){
-	jQuery(domChunk).click(function(){
-	var t = this.title || this.name || null;
-	var a = this.href || this.alt;
-	var g = this.rel || false;
-	tb_show(t,a,g);
-	this.blur();
-	return false;
-	});
-}
-
-function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
-
-	try {
-		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
-			jQuery("body","html").css({height: "100%", width: "100%"});
-			jQuery("html").css("overflow","hidden");
-			if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
-				jQuery("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
-				jQuery("#TB_overlay").click(tb_remove);
-			}
-		}else{//all others
-			if(document.getElementById("TB_overlay") === null){
-				jQuery("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
-				jQuery("#TB_overlay").click(tb_remove);
-			}
-		}
-		
-		if(tb_detectMacXFF()){
-			jQuery("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
-		}else{
-			jQuery("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
-		}
-		
-		if(caption===null){caption="";}
-		jQuery("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
-		jQuery('#TB_load').show();//show loader
-		
-		var baseURL;
-	   if(url.indexOf("?")!==-1){ //ff there is a query string involved
-			baseURL = url.substr(0, url.indexOf("?"));
-	   }else{ 
-	   		baseURL = url;
-	   }
-	   
-	   var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
-	   var urlType = baseURL.toLowerCase().match(urlString);
-
-		if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
-				
-			TB_PrevCaption = "";
-			TB_PrevURL = "";
-			TB_PrevHTML = "";
-			TB_NextCaption = "";
-			TB_NextURL = "";
-			TB_NextHTML = "";
-			TB_imageCount = "";
-			TB_FoundURL = false;
-			if(imageGroup){
-				TB_TempArray = jQuery("a[@rel="+imageGroup+"]").get();
-				for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
-					var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
-						if (!(TB_TempArray[TB_Counter].href == url)) {						
-							if (TB_FoundURL) {
-								TB_NextCaption = TB_TempArray[TB_Counter].title;
-								TB_NextURL = TB_TempArray[TB_Counter].href;
-								TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
-							} else {
-								TB_PrevCaption = TB_TempArray[TB_Counter].title;
-								TB_PrevURL = TB_TempArray[TB_Counter].href;
-								TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
-							}
-						} else {
-							TB_FoundURL = true;
-							TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);											
-						}
-				}
-			}
-
-			imgPreloader = new Image();
-			imgPreloader.onload = function(){		
-			imgPreloader.onload = null;
-				
-			// Resizing large images - orginal by Christian Montoya edited by me.
-			var pagesize = tb_getPageSize();
-			var x = pagesize[0] - 150;
-			var y = pagesize[1] - 150;
-			var imageWidth = imgPreloader.width;
-			var imageHeight = imgPreloader.height;
-			if (imageWidth > x) {
-				imageHeight = imageHeight * (x / imageWidth); 
-				imageWidth = x; 
-				if (imageHeight > y) { 
-					imageWidth = imageWidth * (y / imageHeight); 
-					imageHeight = y; 
-				}
-			} else if (imageHeight > y) { 
-				imageWidth = imageWidth * (y / imageHeight); 
-				imageHeight = y; 
-				if (imageWidth > x) { 
-					imageHeight = imageHeight * (x / imageWidth); 
-					imageWidth = x;
-				}
-			}
-			// End Resizing
-			
-			TB_WIDTH = imageWidth + 30;
-			TB_HEIGHT = imageHeight + 60;
-			jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>"); 		
-			
-			jQuery("#TB_closeWindowButton").click(tb_remove);
-			
-			if (!(TB_PrevHTML === "")) {
-				function goPrev(){
-					if(jQuery(document).unbind("click",goPrev)){jQuery(document).unbind("click",goPrev);}
-					jQuery("#TB_window").remove();
-					jQuery("body").append("<div id='TB_window'></div>");
-					tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
-					return false;	
-				}
-				jQuery("#TB_prev").click(goPrev);
-			}
-			
-			if (!(TB_NextHTML === "")) {		
-				function goNext(){
-					jQuery("#TB_window").remove();
-					jQuery("body").append("<div id='TB_window'></div>");
-					tb_show(TB_NextCaption, TB_NextURL, imageGroup);				
-					return false;	
-				}
-				jQuery("#TB_next").click(goNext);
-				
-			}
-
-			document.onkeydown = function(e){ 	
-				if (e == null) { // ie
-					keycode = event.keyCode;
-				} else { // mozilla
-					keycode = e.which;
-				}
-				if(keycode == 27){ // close
-					tb_remove();
-				} else if(keycode == 190){ // display previous image
-					if(!(TB_NextHTML == "")){
-						document.onkeydown = "";
-						goNext();
-					}
-				} else if(keycode == 188){ // display next image
-					if(!(TB_PrevHTML == "")){
-						document.onkeydown = "";
-						goPrev();
-					}
-				}	
-			};
-			
-			tb_position();
-			jQuery("#TB_load").remove();
-			jQuery("#TB_ImageOff").click(tb_remove);
-			jQuery("#TB_window").css({display:"block"}); //for safari using css instead of show
-			};
-			
-			imgPreloader.src = url;
-		}else{//code to show html
-			
-			var queryString = url.replace(/^[^\?]+\??/,'');
-			var params = tb_parseQuery( queryString );
-
-			TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
-			TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
-			ajaxContentW = TB_WIDTH - 30;
-			ajaxContentH = TB_HEIGHT - 45;
-			
-			if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window		
-					urlNoQuery = url.split('TB_');
-					jQuery("#TB_iframeContent").remove();
-					if(params['modal'] != "true"){//iframe no modal
-						jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
-					}else{//iframe modal
-					jQuery("#TB_overlay").unbind();
-						jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'> </iframe>");
-					}
-			}else{// not an iframe, ajax
-					if(jQuery("#TB_window").css("display") != "block"){
-						if(params['modal'] != "true"){//ajax no modal
-						jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
-						}else{//ajax modal
-						jQuery("#TB_overlay").unbind();
-						jQuery("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");	
-						}
-					}else{//this means the window is already up, we are just loading new content via ajax
-						jQuery("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
-						jQuery("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
-						jQuery("#TB_ajaxContent")[0].scrollTop = 0;
-						jQuery("#TB_ajaxWindowTitle").html(caption);
-					}
-			}
-					
-			jQuery("#TB_closeWindowButton").click(tb_remove);
-			
-				if(url.indexOf('TB_inline') != -1){	
-					jQuery("#TB_ajaxContent").append(jQuery('#' + params['inlineId']).children());
-					jQuery("#TB_window").unload(function () {
-						jQuery('#' + params['inlineId']).append( jQuery("#TB_ajaxContent").children() ); // move elements back when you're finished
-					});
-					tb_position();
-					jQuery("#TB_load").remove();
-					jQuery("#TB_window").css({display:"block"}); 
-				}else if(url.indexOf('TB_iframe') != -1){
-					tb_position();
-					if(jQuery.browser.safari){//safari needs help because it will not fire iframe onload
-						jQuery("#TB_load").remove();
-						jQuery("#TB_window").css({display:"block"});
-					}
-				}else{
-					jQuery("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
-						tb_position();
-						jQuery("#TB_load").remove();
-						tb_init("#TB_ajaxContent a.thickbox");
-						jQuery("#TB_window").css({display:"block"});
-					});
-				}
-			
-		}
-
-		if(!params['modal']){
-			document.onkeyup = function(e){ 	
-				if (e == null) { // ie
-					keycode = event.keyCode;
-				} else { // mozilla
-					keycode = e.which;
-				}
-				if(keycode == 27){ // close
-					tb_remove();
-				}	
-			};
-		}
-		
-	} catch(e) {
-		//nothing here
-	}
-}
-
-//helper functions below
-function tb_showIframe(){
-	jQuery("#TB_load").remove();
-	jQuery("#TB_window").css({display:"block"});
-}
-
-function tb_remove() {
- 	jQuery("#TB_imageOff").unbind("click");
-	jQuery("#TB_closeWindowButton").unbind("click");
-	jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
-	jQuery("#TB_load").remove();
-	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
-		jQuery("body","html").css({height: "auto", width: "auto"});
-		jQuery("html").css("overflow","");
-	}
-	document.onkeydown = "";
-	document.onkeyup = "";
-	return false;
-}
-
-function tb_position() {
-jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
-	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
-		jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
-	}
-}
-
-function tb_parseQuery ( query ) {
-   var Params = {};
-   if ( ! query ) {return Params;}// return empty object
-   var Pairs = query.split(/[;&]/);
-   for ( var i = 0; i < Pairs.length; i++ ) {
-      var KeyVal = Pairs[i].split('=');
-      if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
-      var key = unescape( KeyVal[0] );
-      var val = unescape( KeyVal[1] );
-      val = val.replace(/\+/g, ' ');
-      Params[key] = val;
-   }
-   return Params;
-}
-
-function tb_getPageSize(){
-	var de = document.documentElement;
-	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
-	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
-	arrayPageSize = [w,h];
-	return arrayPageSize;
-}
-
-function tb_detectMacXFF() {
-  var userAgent = navigator.userAgent.toLowerCase();
-  if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
-    return true;
-  }
-}
-
-
@@ -1901,17 +1901,6 @@ a.button.disabled, input.disabled {
  * Block options editor floating window *
  ****************************************/
  
-/* FIXME This changes broke colorboxes all over the place.
- * Therefore I'm canceling them until they are properly treateda. */
-#cboxLoadedContent {
-  background: #FFF;
-/*  box-shadow: 0 0 15px #888 inset;
-    border-radius: 5px;
-    border: 1px solid #777;
-    border-left: none;
-    border-right: none; */
-}
-
 .block-config-options {
   padding: 0px 10px 0px 30px;
 }
 /*
-    ColorBox Core Style:
+    Colorbox Core Style:
     The following CSS is consistent between example themes and should not be altered.
 */
 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxWrapper {max-width:none;}
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative;}
-#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
 #cboxTitle{margin:0;}
-#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
-.cboxPhoto{float:left; margin:auto; border:0; display:block;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
 .cboxIframe{width:100%; height:100%; display:block; border:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
  
-/* 
+/*
     User Style:
-    Change the following styles to modify the appearance of ColorBox.  They are
+    Change the following styles to modify the appearance of Colorbox.  They are
     ordered & tabbed in a way that represents the nesting of the generated HTML.
 */
 #cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0;}
-#colorbox{}
-    #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px 0;}
-    #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px 0;}
-    #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px -29px;}
-    #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px -29px;}
+#colorbox{outline:0;}
+    #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px 0;}
+    #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px 0;}
+    #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px -29px;}
+    #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px -29px;}
     #cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;}
     #cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;}
     #cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;}
     #cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;}
     #cboxContent{background:#fff; overflow:hidden;}
+        .cboxIframe{background:#fff;}
         #cboxError{padding:50px; border:1px solid #ccc;}
         #cboxLoadedContent{margin-bottom:28px;}
         #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
         #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
+        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
+        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
+
+        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+
+        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
         #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
         #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
-        #cboxPrevious.hover{background-position:-75px -25px;}
+        #cboxPrevious:hover{background-position:-75px -25px;}
         #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
-        #cboxNext.hover{background-position:-50px -25px;}
-        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
-        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
+        #cboxNext:hover{background-position:-50px -25px;}
         #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
-        #cboxClose.hover{background-position:-25px -25px;}
+        #cboxClose:hover{background-position:-25px -25px;}
  
 /*
-  The following fixes a problem where IE7+ replaces a PNG's alpha transparency with a black fill
-  when an alpha filter (opacity change) is set on the element or ancestor element.
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
 */
 .cboxIE #cboxTopLeft,
 .cboxIE #cboxTopCenter,
@@ -57,26 +68,3 @@
 .cboxIE #cboxMiddleRight {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
 }
-
-/*
-  The following provides PNG transparency support for IE6
-*/
-.cboxIE6 #cboxTopLeft{background:url(../images/colorbox/ie6/borderTopLeft.png);}
-.cboxIE6 #cboxTopCenter{background:url(../images/colorbox/ie6/borderTopCenter.png);}
-.cboxIE6 #cboxTopRight{background:url(../images/colorbox/ie6/borderTopRight.png);}
-.cboxIE6 #cboxBottomLeft{background:url(../images/colorbox/ie6/borderBottomLeft.png);}
-.cboxIE6 #cboxBottomCenter{background:url(../images/colorbox/ie6/borderBottomCenter.png);}
-.cboxIE6 #cboxBottomRight{background:url(../images/colorbox/ie6/borderBottomRight.png);}
-.cboxIE6 #cboxMiddleLeft{background:url(../images/colorbox/ie6/borderMiddleLeft.png);}
-.cboxIE6 #cboxMiddleRight{background:url(../images/colorbox/ie6/borderMiddleRight.png);}
-
-.cboxIE6 #cboxTopLeft,
-.cboxIE6 #cboxTopCenter,
-.cboxIE6 #cboxTopRight,
-.cboxIE6 #cboxBottomLeft,
-.cboxIE6 #cboxBottomCenter,
-.cboxIE6 #cboxBottomRight,
-.cboxIE6 #cboxMiddleLeft,
-.cboxIE6 #cboxMiddleRight {
-    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
-}
@@ -1,63 +0,0 @@
-/* - - - - - - - - - - - - - - - - - - - - -
-
-Title : Lightbox CSS
-Author : Kevin Hale
-URL : http://particletree.com/features/lightbox-gone-wild/
-
-Created : January 13, 2006
-Modified : February 1, 2006
-
-- - - - - - - - - - - - - - - - - - - - - */
-
-#lightbox {
-  display: none;
-  position: absolute;
-  top: 150px;
-  left: 50%;
-  z-index: 300;
-  width: 500px;
-  margin-left: -265px;
-  border: 1px solid #000;
-  text-align: left;
-  padding: 1em;
-  background: #FFF;
-}
-
-#overlay{
-	display:none;
-	position:absolute;
-	top:0;
-	left:0;
-	width:100%;
-	height:100%;
-	z-index:200;
-	background-color:#000;
-	-moz-opacity: 0.75;
-	opacity:.75;
-	filter: alpha(opacity=75);
-}
-#overlay[id]{
-	position:fixed;
-}
-
-#lightbox.done #lbLoadMessage{
-	display:none;
-}
-#lightbox.done #lbContent{
-	display:block;
-}
-#lightbox.loading #lbContent{
-	display:none;
-}
-#lightbox.loading #lbLoadMessage{
-	display:block;
-}
-
-#lightbox.done img{
-	width:100%;
-	height:100%;
-}
-
-#lightbox select {
-  max-width: 100%;
-}
@@ -1,163 +0,0 @@
-/* ----------------------------------------------------------------------------------------------------------------*/
-/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
-/* ----------------------------------------------------------------------------------------------------------------*/
-/**{padding: 0; margin: 0;}*/
-
-/* ----------------------------------------------------------------------------------------------------------------*/
-/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
-/* ----------------------------------------------------------------------------------------------------------------*/
-#TB_window {
-	font: 12px Arial, Helvetica, sans-serif;
-	color: #333333;
-}
-
-#TB_secondLine {
-	font: 10px Arial, Helvetica, sans-serif;
-	color:#666666;
-}
-
-#TB_window a:link {color: #666666;}
-#TB_window a:visited {color: #666666;}
-#TB_window a:hover {color: #000;}
-#TB_window a:active {color: #666666;}
-#TB_window a:focus{color: #666666;}
-
-/* ----------------------------------------------------------------------------------------------------------------*/
-/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
-/* ----------------------------------------------------------------------------------------------------------------*/
-#TB_overlay {
-	position: fixed;
-	z-index:200;
-	top: 0px;
-	left: 0px;
-	height:100%;
-	width:100%;
-}
-
-.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
-.TB_overlayBG {
-	background-color:#000;
-	filter:alpha(opacity=75);
-	-moz-opacity: 0.75;
-	opacity: 0.75;
-}
-
-* html #TB_overlay { /* ie6 hack */
-     position: absolute;
-     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
-}
-
-#TB_window {
-	position: fixed;
-	background: white;
-	z-index: 202;
-	color:#000000;
-	display:none;
-	border: 1px solid #000;
-	text-align:left;
-	top:50%;
-	left:50%;
-}
-
-* html #TB_window { /* ie6 hack */
-position: absolute;
-margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
-}
-
-#TB_window img#TB_Image {
-	display:block;
-	margin: 15px 0 0 15px;
-	border-right: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
-	border-top: 1px solid #666;
-	border-left: 1px solid #666;
-}
-
-#TB_caption{
-	height:25px;
-	padding:7px 30px 10px 25px;
-	float:left;
-}
-
-#TB_closeWindow{
-	height:25px;
-	padding:11px 25px 10px 0;
-	float:right;
-}
-
-#TB_closeAjaxWindow{
-	padding:7px 10px 5px 0;
-	margin-bottom:1px;
-	text-align:right;
-	float:right;
-}
-
-#TB_ajaxWindowTitle{
-	float:left;
-	padding:7px 0 5px 10px;
-	margin-bottom:1px;
-}
-
-#TB_title{
-	background-color:#e8e8e8;
-	height:27px;
-}
-
-#TB_ajaxContent{
-	clear:both;
-	padding:2px 15px 15px 15px;
-	overflow:auto;
-	text-align:left;
-	line-height:1.4em;
-}
-
-#TB_ajaxContent.TB_modal{
-	padding:15px;
-}
-
-#TB_ajaxContent p{
-	padding:5px 0px 5px 0px;
-}
-
-#TB_load{
-	position: fixed;
-	display:none;
-	height:13px;
-	width:208px;
-	z-index:203;
-	top: 50%;
-	left: 50%;
-	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
-}
-
-* html #TB_load { /* ie6 hack */
-position: absolute;
-margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
-}
-
-#TB_HideSelect{
-	z-index:199;
-	position:fixed;
-	top: 0;
-	left: 0;
-	background-color:#fff;
-	border:none;
-	filter:alpha(opacity=0);
-	-moz-opacity: 0;
-	opacity: 0;
-	height:100%;
-	width:100%;
-}
-
-* html #TB_HideSelect { /* ie6 hack */
-     position: absolute;
-     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
-}
-
-#TB_iframeContent{
-	clear:both;
-	border:none;
-	margin-bottom:-1px;
-	margin-top:1px;
-	_margin-bottom:1px;
-}
@@ -638,7 +638,7 @@ class CmsControllerTest &lt; ActionController::TestCase
  
   should 'display OK button on why_categorize popup' do
     get :why_categorize, :profile => profile.identifier
-    assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # lightbox close button
+    assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # modal close button
   end
  
   should 'display published option' do
@@ -1,36 +0,0 @@
-require_relative "../test_helper"
-
-class ColorboxHelperTest < ActiveSupport::TestCase
-
-  include ColorboxHelper
-
-  should 'provide the needed files' do
-    assert File.exists?(Rails.root.join('public', 'stylesheets', 'colorbox.css')), 'colorbox.css expected to be in public/stylesheets, but not found'
-    assert File.exists?(Rails.root.join('public', 'javascripts', 'colorbox.js')), 'colorbox.js expected to be in public/javascripts, but not found'
-  end
-
-  should 'provide link to close colorbox' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'colorbox-close', :id => 'my-id' })).returns('[close-colorbox]')
-
-    assert_equal '[close-colorbox]', colorbox_close_button('text', :id => 'my-id')
-  end
-
-  should 'merge existing :class option in colorbox_close_button' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'colorbox-close my-class', :id => 'my-id' })).returns('[close-colorbox]')
-
-    assert_equal '[close-colorbox]', colorbox_close_button('text', :class => 'my-class', :id => 'my-id' )
-  end
-
-  should 'provide colorbox_button' do
-    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
-
-    assert_equal '[button]', colorbox_button('type', 'label', { :action => 'popup'})
-  end
-
-  should 'provide colorbox_icon_button' do
-    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
-
-    assert_equal '[button]', colorbox_icon_button('type', 'label', { :action => 'popup'})
-  end
-
-end
@@ -1,65 +0,0 @@
-require_relative "../test_helper"
-
-class LightboxHelperTest < ActiveSupport::TestCase
-
-  include LightboxHelper
-
-  def setup
-    stubs(:_).with(anything).returns('TEXT')
-  end
-
-  should 'provide the needed files' do
-    assert File.exists?(Rails.root.join('public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
-    assert File.exists?(Rails.root.join('public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
-  end
-
-  should 'provide lightbox_link_to helper' do
-    expects(:link_to).with('text', { :action => 'view', :id => '1' }, has_entries({ :class => 'lbOn', :id => 'my-link' })).returns('[link]')
-    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
-  end
-
-  should 'merge existing :class option in lightbox_link_to' do
-    expects(:link_to).with('text', { :action => 'view', :id => '1' }, has_entries({ :class => 'lbOn my-button', :id => 'my-link' })).returns('[link]')
-    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button',  :id => 'my-link' })
-
-  end
-
-  should 'provide link to close lightbox' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' })).returns('[close-lightbox]')
-
-    assert_equal '[close-lightbox]', lightbox_close_button('text', :id => 'my-id')
-  end
-
-  should 'merge existing :class option in lightbox_close_button' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' })).returns('[close-lightbox]')
-
-    assert_equal '[close-lightbox]', lightbox_close_button('text', :class => 'my-class', :id => 'my-id' )
-  end
-
-  should 'provide lightbox_button' do
-    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'lbOn' })).returns('[button]')
-
-    assert_equal '[button]', lightbox_button('type', 'label', { :action => 'popup'})
-  end
-
-  should 'provide lightbox_icon_button' do
-    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'lbOn' })).returns('[button]')
-
-    assert_equal '[button]', lightbox_icon_button('type', 'label', { :action => 'popup'})
-  end
-
-  should 'tell if rendering inside lightbox' do
-    request = mock
-    expects(:request).returns(request)
-    request.expects(:xhr?).returns(true)
-
-    assert lightbox?
-  end
-
-  should 'provide lightbox_remote_button' do
-    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'remote-lbOn' })).returns('[button]')
-
-    assert_equal '[button]', lightbox_remote_button('type', 'label', { :action => 'popup'})
-  end
-
-end
@@ -0,0 +1,36 @@
+require_relative '../test_helper'
+
+class ModalHelperTest < ActiveSupport::TestCase
+
+  include ModalHelper
+
+  should 'provide the needed files' do
+    assert File.exists?(Rails.root.join('public', 'stylesheets', 'colorbox.css')), 'colorbox.css expected to be in public/stylesheets, but not found'
+    assert File.exists?(Rails.root.join('public', 'javascripts', 'jquery.colorbox-min.js')), 'jquery.colorbox-min.js expected to be in public/javascripts, but not found'
+  end
+
+  should 'provide link to close modal' do
+    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'modal-toggle modal-close', :id => 'my-id' })).returns('[close-modal]')
+
+    assert_equal '[close-modal]', modal_close_button('text', :id => 'my-id')
+  end
+
+  should 'merge existing :class option in modal_close_button' do
+    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'modal-toggle modal-close my-class', :id => 'my-id' })).returns('[close-modal]')
+
+    assert_equal '[close-modal]', modal_close_button('text', :class => 'my-class', :id => 'my-id' )
+  end
+
+  should 'provide modal_button' do
+    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'modal-toggle' })).returns('[button]')
+
+    assert_equal '[button]', modal_button('type', 'label', { :action => 'popup'})
+  end
+
+  should 'provide modal_icon_button' do
+    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'modal-toggle' })).returns('[button]')
+
+    assert_equal '[button]', modal_icon_button('type', 'label', { :action => 'popup'})
+  end
+
+end
@@ -1,25 +0,0 @@
-require_relative "../test_helper"
-
-class ThickboxHelperTest < ActiveSupport::TestCase
-  include ThickboxHelper
-
-  def url_for(url)
-    url
-  end
-
-  should 'create thickbox links correcly' do
-    expects(:link_to).with('Title', '/url#TB_inline?height=300&width=500&inlineId=inlineLoginBox&modal=true', :class => 'thickbox')
-    thickbox_inline_popup_link('Title', '/url', 'inlineLoginBox')
-  end
-
-  should 'pass along extra options' do
-    expects(:link_to).with('Title', anything, :class => 'thickbox', :id => 'lalala', :title => 'lelele')
-    thickbox_inline_popup_link('Title', '/url', 'inlineLoginBox', :id => 'lalala', :title => 'lelele')
-  end
-
-  should 'generate close button' do
-    expects(:button_to_function).with(:close, 'Title', 'tb_remove();').returns('[close-button]')
-    assert_equal '[close-button]', thickbox_close_button('Title')
-  end
-
-end
...	...	@@ -8,11 +8,7 @@ module ApplicationHelper
8	8
9	9	include PermissionNameHelper
10	10
11		- include LightboxHelper
12		-
13		- include ThickboxHelper
14		-
15		- include ColorboxHelper
	11	+ include ModalHelper
16	12
17	13	include BoxesHelper
18	14
...	...	@@ -651,8 +647,8 @@ module ApplicationHelper
651	647	' onfocus="if(this.value==\''+s+'\'){this.value=\'\'} this.form.className=\'focus-in\'"'+
652	648	' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+
653	649	'</form>'
654		- else #opt == 'lightbox_link' is default
655		- lightbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
	650	+ else
	651	+ modal_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
656	652	:controller => 'search',
657	653	:action => 'popup',
658	654	:category_path => (@category ? @category.explode_path : nil)},
...	...	@@ -1050,7 +1046,7 @@ module ApplicationHelper
1050	1046	{s_('contents\|Most commented') => {:href => url_for({:controller => 'search', :action => 'contents', :filter => 'more_comments'})}}
1051	1047	]
1052	1048	if logged_in?
1053		- links.push(_('New content') => colorbox_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
	1049	+ links.push(_('New content') => modal_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
1054	1050	end
1055	1051
1056	1052	link_to(content_tag(:span, _('Contents'), :class => 'icon-menu-articles'), {:controller => "search", :action => 'contents', :category_path => nil}, :id => 'submenu-contents') +
...	...
...	...	@@ -231,7 +231,7 @@ module BoxesHelper
231	231	end
232	232
233	233	if block.editable?
234		- buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
	234	+ buttons << modal_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
235	235	end
236	236
237	237	if !block.main?
...	...	@@ -241,7 +241,7 @@ module BoxesHelper
241	241	end
242	242
243	243	if block.respond_to?(:help)
244		- buttons << thickbox_inline_popup_icon(:help, _('Help on this block'), {}, "help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + thickbox_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
	244	+ buttons << modal_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + modal_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
245	245	end
246	246
247	247	if block.embedable?
...	...
...	...	@@ -1,25 +0,0 @@
1		-module ColorboxHelper
2		-
3		- def colorbox_close_button(text, options = {})
4		- button(:close, text, '#', colorbox_options(options, :close))
5		- end
6		-
7		- def colorbox_button(type, label, url, options = {})
8		- button(type, label, url, colorbox_options(options))
9		- end
10		-
11		- def colorbox_icon_button(type, label, url, options = {})
12		- icon_button(type, label, url, colorbox_options(options))
13		- end
14		-
15		- # options must be an HTML options hash as passed to link_to etc.
16		- #
17		- # returns a new hash with colorbox class added. Keeps existing classes.
18		- def colorbox_options(options, type=nil)
19		- the_class = 'colorbox'
20		- the_class += "-#{type.to_s}" unless type.nil?
21		- the_class << " #{options[:class]}" if options.has_key?(:class)
22		- options.merge(:class => the_class)
23		- end
24		-
25		-end
...	...	@@ -65,7 +65,7 @@ module CommentHelper
65	65
66	66	def link_for_edit(comment)
67	67	if comment.can_be_updated_by?(user)
68		- {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}
	68	+ {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'modal')}
69	69	end
70	70	end
71	71
...	...
...	...	@@ -1,36 +0,0 @@
1		-module LightboxHelper
2		-
3		- def lightbox_link_to(text, url, options = {})
4		- link_to(text, url, lightbox_options(options))
5		- end
6		-
7		- def lightbox_close_button(text, options = {})
8		- button(:close, text, '#', lightbox_options(options, 'lbAction').merge(:rel => 'deactivate'))
9		- end
10		-
11		- def lightbox_button(type, label, url, options = {})
12		- button(type, label, url, lightbox_options(options))
13		- end
14		-
15		- def lightbox_icon_button(type, label, url, options = {})
16		- icon_button(type, label, url, lightbox_options(options))
17		- end
18		-
19		- # options must be an HTML options hash as passed to link_to etc.
20		- #
21		- # returns a new hash with lightbox class added. Keeps existing classes.
22		- def lightbox_options(options, lightbox_type = 'lbOn')
23		- the_class = lightbox_type
24		- the_class << " #{options[:class]}" if options.has_key?(:class)
25		- options.merge(:class => the_class)
26		- end
27		-
28		- def lightbox?
29		- request.xhr?
30		- end
31		-
32		- def lightbox_remote_button(type, label, url, options = {})
33		- button(type, label, url, lightbox_options(options, 'remote-lbOn'))
34		- end
35		-
36		-end
...	...	@@ -0,0 +1,46 @@
	1	+module ModalHelper
	2	+
	3	+ def modal_inline_link_to title, url, selector, options = {}
	4	+ link_to title, url, modal_options(options.merge(:inline => selector))
	5	+ end
	6	+
	7	+ def modal_inline_icon type, title, url, selector, options = {}
	8	+ icon_button type, title, url, modal_options(options.merge(:inline => selector))
	9	+ end
	10	+
	11	+ def modal_link_to title, url, options = {}
	12	+ link_to title, url, modal_options(options)
	13	+ end
	14	+
	15	+ def modal_close_link text, options = {}
	16	+ link_to text, '#', modal_options(options, :close)
	17	+ end
	18	+
	19	+ def modal_close_button(text, options = {})
	20	+ button :close, text, '#', modal_options(options, :close).merge(:rel => 'deactivate')
	21	+ end
	22	+
	23	+ def modal_button(type, label, url, options = {})
	24	+ button type, label, url, modal_options(options)
	25	+ end
	26	+
	27	+ def modal_icon_button(type, label, url, options = {})
	28	+ icon_button type, label, url, modal_options(options)
	29	+ end
	30	+
	31	+ # options must be an HTML options hash as passed to link_to etc.
	32	+ #
	33	+ # returns a new hash with modal class added. Keeps existing classes.
	34	+ def modal_options(options, type=nil)
	35	+ inline_selector = options.delete :inline
	36	+ options[:onclick] = "return noosfero.modal.inline('#{inline_selector}')" if inline_selector
	37	+
	38	+ classes = if inline_selector then '' else 'modal-toggle' end
	39	+ classes += " modal-#{type.to_s}" if type.present?
	40	+ classes << " #{options[:class]}" if options.has_key? :class
	41	+ options.merge!(:class => classes)
	42	+
	43	+ options
	44	+ end
	45	+
	46	+end
...	...
...	...	@@ -1,11 +0,0 @@
1		-module ThickboxHelper
2		- def thickbox_inline_popup_link(title, url, id, options = {})
3		- link_to(title, url_for(url) + "#TB_inline?height=300&width=500&inlineId=#{id}&modal=true", {:class => 'thickbox'}.merge(options))
4		- end
5		- def thickbox_inline_popup_icon(type, title, url, id, options = {})
6		- icon_button(type, title, url_for(url) + "#TB_inline?height=300&width=500&inlineId=#{id}&modal=true", {:class => "thickbox"}.merge(options))
7		- end
8		- def thickbox_close_button(title)
9		- button_to_function(:close, title, 'tb_remove();')
10		- end
11		-end
1	1	<%= labelled_form_for :user,
2	2	:url => { :controller => 'account', :action => (params[:enterprise_code] ? 'activate_enterprise' : 'login') } do \|f\| %>
3	3
4		-<%= f.text_field :login,
5		- :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
6		- :onchange => 'this.value = convToValidLogin( this.value )' %>
	4	+<%= f.text_field :login, :id => 'user_login', :onchange => 'this.value = convToValidLogin( this.value )' %>
7	5
8		-<%= f.password_field :password,
9		- :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password' %>
	6	+<%= f.password_field :password, :id => 'user_password' %>
10	7
11	8	<% if params[:enterprise_code] %>
12	9	<%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
...	...	@@ -16,7 +13,7 @@
16	13
17	14	<% button_bar do %>
18	15	<%= submit_button( 'login', _('Log in') )%>
19		- <%= lightbox_close_button(_('Cancel')) if lightbox? %>
	16	+ <%= modal_close_button _('Cancel') if request.xhr? %>
20	17	<% end %>
21	18
22	19	<% end %>
...	...
1	1	<h1><%= _('Identify yourself') %></h1>
2	2
3	3	<p>
4		-<%= lightbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
	4	+<%= modal_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
5	5
6	6	<%= _('You need to login to be able to use all the features in this environment.') %>
7	7	</p>
...	...
...	...	@@ -3,7 +3,7 @@
3	3	<h2><%= _('Login') %></h2>
4	4
5	5	<% @user \|\|= User.new %>
6		-<% is_thickbox \|\|= false %>
	6	+<% is_popin \|\|= false %>
7	7
8	8	<%= @message %>
9	9
...	...	@@ -17,8 +17,8 @@
17	17
18	18	<% button_bar do %>
19	19	<%= submit_button( 'login', _('Log in') )%>
20		- <% if is_thickbox %>
21		- <%= thickbox_close_button(_('Cancel')) %>
	20	+ <% if is_popin %>
	21	+ <%= modal_close_button(_('Cancel')) %>
22	22	<% end %>
23	23	<% end %>
24	24
...	...