Create a block to make the products highlighted:

* This block must be available to Enterprises and the enterprise administrator could choose what products will be highlighted * The environment could have this block and in this case the products are choosen randomically (ActionItem1576)

Create a block to make the products highlighted:
* This block must be available to Enterprises and the enterprise administrator could choose what products will be highlighted * The environment could have this block and in this case the products are choosen randomically (ActionItem1576)
Leandro Santos · Joenio Costa
1 parent b361aebc
Showing 21 changed files with 586 additions and 8 deletions Show diff stats
app/controllers/admin/environment_design_controller.rb
app/controllers/my_profile/profile_design_controller.rb
app/helpers/application_helper.rb
app/models/enterprise.rb
app/models/environment.rb
app/models/featured_products_block.rb
app/views/blocks/featured_products.rhtml
app/views/box_organizer/_featured_products_block.rhtml
app/views/layouts/_javascript.rhtml
app/views/manage_products/_form.rhtml
db/migrate/20100619031945_add_highlighted_to_product.rb
db/schema.rb
public/javascripts/reflection.js
public/stylesheets/application.css
test/functional/environment_design_controller_test.rb
test/functional/profile_design_controller_test.rb
test/unit/application_helper_test.rb
test/unit/enterprise_test.rb
test/unit/environment_test.rb
test/unit/featured_products_block_test.rb
@@ -3,7 +3,7 @@ class EnvironmentDesignController &lt; BoxOrganizerController
   protect 'edit_environment_design', :environment
   def available_blocks
-    @available_blocks ||= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock ]
+    @available_blocks ||= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock, FeaturedProductsBlock ]
   end
 end
@@ -24,6 +24,7 @@ class ProfileDesignController &lt; BoxOrganizerController
     if profile.enterprise?
       blocks << DisabledEnterpriseMessageBlock
       blocks << HighlightsBlock
+      blocks << FeaturedProductsBlock
     end
     # product block exclusive for enterprises in environments that permits it
@@ -960,4 +960,9 @@ module ApplicationHelper
     text_field_tag(name, value, options.merge(:class => 'colorpicker_field'))
   end
+  # for now force currency to Brazillian format, like: "12.345,20"
+  def float_to_currency(price)
+    number_to_currency(price, :unit => 'R$', :separator => ',', :delimiter => '.')
+  end
+
 end
@@ -51,6 +51,10 @@ class Enterprise &lt; Organization
     environment ? environment.active_enterprise_fields : []
   end
+  def highlighted_products_with_image(options = {})
+    Product.find(:all, {:conditions => {:highlighted => true}, :joins => :image}.merge(options))
+  end
+
   def required_fields
     environment ? environment.required_enterprise_fields : []
   end
@@ -628,4 +628,9 @@ class Environment &lt; ActiveRecord::Base
     end
   end
+  def highlighted_products_with_image(options = {})
+    Product.find(:all, {:conditions => {:highlighted => true, :enterprise_id => self.enterprises.find(:all, :select => :id) }, :joins => :image}.merge(options))
+  end
+
 end
+
@@ -0,0 +1,35 @@
+class FeaturedProductsBlock < Block
+
+  settings_items :product_ids, :type => Array, :default => []
+  settings_items :groups_of, :type => :integer, :default => 3
+  settings_items :speed, :type => :integer, :default => 1000
+  settings_items :reflect, :type => :boolean, :default => true
+
+  before_save do |block|
+    if block.owner.kind_of?(Environment) && block.product_ids.blank?
+      seed = block.owner.products.count
+      block.product_ids = block.owner.highlighted_products_with_image(:offset => (rand(seed) % (seed - block.groups_of * 3)), :limit => block.groups_of * 3).map(&:id)
+    end
+    block.groups_of = block.groups_of.to_i
+  end
+
+  def self.description
+    _('Featured Products')
+  end
+
+  def products
+    Product.find(self.product_ids) || []
+  end
+
+  def products_for_selection
+    self.owner.highlighted_products_with_image
+  end
+
+  def content
+    block = self
+    lambda do
+      render :file => 'blocks/featured_products', :locals => { :block => block }
+    end
+  end
+
+end
@@ -0,0 +1,55 @@
+<%= block_title(block.title) %>
+<% unless block.products.blank? %>
+  <%= link_to content_tag(:span, _('Previous')), '#', :class => 'featured-product-prev featured-product-arrow'  %>
+  <div class="featured-products-block-container">
+    <ul class="featured-products-list">
+      <% block.products.in_groups_of(block.groups_of).each do |group| %>
+        <li class="featured-products-group">
+          <div class="featured-product-items">
+            <ul>
+            <% group.reject{ |x| x.nil? }.each_with_index do |p, i| %>
+            <li class="featured-product-item">
+            <%= link_to content_tag(:img, nil, :src => p.image.public_filename(:thumb), :alt => p.name, :class => ('reflect' if block.reflect)), product_path(p.enterprise.identifier, p), :class => 'featured-product-image' %>
+              <div class="featured-product-info position-<%= i + 1 %>" style="display: none">
+                <div class="featured-product-text">
+                  <h3><%= p.name %></h3>
+                  <p class="featured-product-price"><%= float_to_currency(p.price) %></p>
+                  <p class="featured-product-desc"><%= p.description.chars[0...50].to_s + '...' %></p>
+                  <p><%= link_to _('See More'), product_path(p.enterprise.identifier, p), :class => 'featured-product-link' %></p>
+                </div>
+              </div>
+            </li>
+            <% end %>
+            </ul>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <%= link_to content_tag(:span, _('Next')), '#', :class => 'featured-product-next featured-product-arrow'  %>
+  <script type="text/javascript">
+    (function($) {
+     var options = {
+       fx : 'scrollHorz',
+       timeout: 0,
+       prev: '#block-<%= block.id %> .featured-product-prev',
+       next: '#block-<%= block.id %> .featured-product-next',
+       speed: <%= block.speed || 2000 %>
+      }
+      $('#block-<%= block.id %> .featured-products-list').cycle(options);
+
+      $(document).ready(function(){
+        $(".featured-product-item").hover(
+          function() {
+            $(".featured-product-info", this).fadeIn('slow');
+          },
+          function() {
+            $(".featured-product-info", this).fadeOut('slow');
+        });
+      });
+    })(jQuery);
+  </script>
+  <p class="featured-products-footer"></p>
+<% else %>
+  <em><%= _('Please, edit this block and choose some products') %></em>
+<% end %>
@@ -0,0 +1,8 @@
+<strong><%= _('Featured Products') %></strong>
+<div id='edit-featured-products-block'>
+  <p><%= label_tag _('Choose some products') %></p>
+  <p><%= select_tag 'block[product_ids][]', options_for_select(@block.products_for_selection.map{|p| [p.name, p.id.to_s]}, @block.product_ids), :multiple => true %></p>
+  <p><%= labelled_form_field check_box(:block, :reflect) + _('Reflect products'), '' %></p>
+  <p><%= labelled_form_field(_('Transition speed (in seconds)'), select('block', 'speed', (1..10).to_a.collect{|i| [i, i*1000] })) %>
+  <p><%= labelled_form_field(_('In groups of'), select('block', 'groups_of', (1..10).to_a)) %>
+</div>
-<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorpicker', 'colorpicker-noosfero', :cache => 'cache-general' %>
+<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorpicker', 'colorpicker-noosfero', 'reflection', :cache => 'cache-general' %>
@@ -6,6 +6,7 @@
   <%= required display_form_field( _('Name:'), f.text_field(:name) ) %>
   <%= display_form_field( _('Price:'), f.text_field(:price) ) %>
   <%= display_form_field( _('Description:'), f.text_area(:description, :rows => 10) ) %>
+  <%= labelled_form_field(f.check_box(:highlighted) + _('Highlight this product'),'') %>
   <% f.fields_for :image_builder, @product.image do |i| %>
     <%= file_field_or_thumbnail(_('Image:'), @product.image, i) %>
   <% end %>
@@ -0,0 +1,9 @@
+class AddHighlightedToProduct < ActiveRecord::Migration
+  def self.up
+    add_column :products, :highlighted, :boolean
+  end
+
+  def self.down
+    remove_column :products, :highlighted
+  end
+end
@@ -9,7 +9,8 @@
 #
 # It's strongly recommended to check this file into your version control system.
-ActiveRecord::Schema.define(:version => 20100514133346) do
+
+ActiveRecord::Schema.define(:version => 20100619031945) do
   create_table "article_versions", :force => true do |t|
     t.integer  "article_id"
@@ -240,6 +241,7 @@ ActiveRecord::Schema.define(:version =&gt; 20100514133346) do
     t.datetime "updated_at"
     t.float    "lat"
     t.float    "lng"
+    t.boolean  "highlighted"
   end
   add_index "products", ["enterprise_id"], :name => "index_products_on_enterprise_id"
@@ -0,0 +1,177 @@
+/**
+ * reflection.js v2.0
+ * http://cow.neondragon.net/stuff/reflection/
+ * Freely distributable under MIT-style license.
+ */
+ 
+/* From prototype.js */
+if (!document.myGetElementsByClassName) {
+	document.myGetElementsByClassName = function(className) {
+		var children = document.getElementsByTagName('*') || document.all;
+		var elements = new Array();
+	  
+		for (var i = 0; i < children.length; i++) {
+			var child = children[i];
+			var classNames = child.className.split(' ');
+			for (var j = 0; j < classNames.length; j++) {
+				if (classNames[j] == className) {
+					elements.push(child);
+					break;
+				}
+			}
+		}
+		return elements;
+	}
+}
+
+var Reflection = {
+	defaultHeight : 0.5,
+	defaultOpacity: 0.5,
+	
+	add: function(image, options) {
+		Reflection.remove(image);
+		
+		doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
+		if (options) {
+			for (var i in doptions) {
+				if (!options[i]) {
+					options[i] = doptions[i];
+				}
+			}
+		} else {
+			options = doptions;
+		}
+	
+		try {
+			var d = document.createElement('div');
+			var p = image;
+			
+			var classes = p.className.split(' ');
+			var newClasses = '';
+			for (j=0;j<classes.length;j++) {
+				if (classes[j] != "reflect") {
+					if (newClasses) {
+						newClasses += ' '
+					}
+					
+					newClasses += classes[j];
+				}
+			}
+
+			var reflectionHeight = Math.floor(p.height*options['height']);
+			var divHeight = Math.floor(p.height*(1+options['height']));
+			
+			var reflectionWidth = p.width;
+			
+			if (document.all && !window.opera) {
+				/* Fix hyperlinks */
+                if(p.parentElement.tagName == 'A') {
+	                var d = document.createElement('a');
+	                d.href = p.parentElement.href;
+                }  
+                    
+				/* Copy original image's classes & styles to div */
+				d.className = newClasses;
+				p.className = 'reflected';
+				
+				d.style.cssText = p.style.cssText;
+				p.style.cssText = 'vertical-align: bottom';
+			
+				var reflection = document.createElement('img');
+				reflection.src = p.src;
+				reflection.style.width = reflectionWidth+'px';
+				reflection.style.display = 'block';
+				reflection.style.height = p.height+"px";
+				
+				reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
+				reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
+				
+				d.style.width = reflectionWidth+'px';
+				d.style.height = divHeight+'px';
+				p.parentNode.replaceChild(d, p);
+				
+				d.appendChild(p);
+				d.appendChild(reflection);
+			} else {
+				var canvas = document.createElement('canvas');
+				if (canvas.getContext) {
+					/* Copy original image's classes & styles to div */
+					d.className = newClasses;
+					p.className = 'reflected';
+					
+					d.style.cssText = p.style.cssText;
+					p.style.cssText = 'vertical-align: bottom';
+			
+					var context = canvas.getContext("2d");
+				
+					canvas.style.height = reflectionHeight+'px';
+					canvas.style.width = reflectionWidth+'px';
+					canvas.height = reflectionHeight;
+					canvas.width = reflectionWidth;
+					
+					d.style.width = reflectionWidth+'px';
+					d.style.height = divHeight+'px';
+					p.parentNode.replaceChild(d, p);
+					
+					d.appendChild(p);
+					d.appendChild(canvas);
+					
+					context.save();
+					
+					context.translate(0,image.height-1);
+					context.scale(1,-1);
+					
+					context.drawImage(image, 0, 0, reflectionWidth, image.height);
+	
+					context.restore();
+					
+					context.globalCompositeOperation = "destination-out";
+					var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
+					
+					gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+					gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
+		
+					context.fillStyle = gradient;
+					context.rect(0, 0, reflectionWidth, reflectionHeight*2);
+					context.fill();
+				}
+			}
+		} catch (e) {
+	    }
+	},
+	
+	remove : function(image) {
+		if (image.className == "reflected") {
+			image.className = image.parentNode.className;
+			image.parentNode.parentNode.replaceChild(image, image.parentNode);
+		}
+	}
+}
+
+function addReflections() {
+	var rimages = document.myGetElementsByClassName('reflect');
+	for (i=0;i<rimages.length;i++) {
+		var rheight = null;
+		var ropacity = null;
+		
+		var classes = rimages[i].className.split(' ');
+		for (j=0;j<classes.length;j++) {
+			if (classes[j].indexOf("rheight") == 0) {
+				var rheight = classes[j].substring(7)/100;
+			} else if (classes[j].indexOf("ropacity") == 0) {
+				var ropacity = classes[j].substring(8)/100;
+			}
+		}
+		
+		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
+	}
+}
+
+if (window.addEventListener) { // DOM method for binding an event
+  window.addEventListener("load", addReflections, false);
+} else if (window.attachEvent) { // IE exclusive method for binding an event
+  window.attachEvent("onload", addReflections);
+} else { // Support older browsers
+  var previousOnload = window.onload;
+  window.onload = function() { if (previousOnload) previousOnload(); addReflections(); }
+}
@@ -3692,3 +3692,110 @@ h1#agenda-title {
 .highlights-image-link {
   border: 1px solid #ccc;
 }
+
+/* Featured Products stuff */
+
+.featured-product-items {
+  width: 100%;
+  display: table;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.featured-product-items ul {
+  display: table-row;
+}
+
+.featured-product-item {
+  list-style-type: none;
+  display: table-cell !important;
+}
+
+.featured-product-item div {
+  margin: 0 auto;
+}
+
+.featured-products-list {
+  padding: 0;
+}
+
+.featured-product-arrow {
+  float: left;
+  width: 20px;
+  background-repeat: no-repeat;
+  height: 160px;
+  background-position: center 55px;
+}
+
+.featured-product-arrow span {
+  display: none;
+}
+
+.featured-product-prev {
+  background-image: url(/designs/icons/tango/Tango/16x16/actions/go-previous.png);
+}
+
+.featured-product-next {
+  background-image: url(/designs/icons/tango/Tango/16x16/actions/go-next.png);
+}
+
+.featured-products-block-container {
+  width: 92%;
+}
+
+.box-2 .featured-products-block-container,
+.box-3 .featured-products-block-container {
+  width: 78%;
+}
+
+.featured-products-group {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.featured-product-desc {
+  display: none;
+}
+
+.featured-products-block-container,
+.featured-products-group {
+  overflow: hidden;
+  float: left;
+  height: 160px;
+  position: relative;
+}
+
+.featured-products-group ul {
+  padding: 0;
+  padding-left: 4px;
+}
+
+.featured-products-footer {
+  clear: both;
+}
+
+.featured-product-info {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  height: 125px;
+  overflow: hidden;
+  font-size: 11px;
+  background-color: #fff;
+  opacity: 0.7;
+  border: 1px solid #333;
+  padding: 5px;
+  text-align: left;
+}
+
+.box-2 .featured-product-info,
+.box-3 .featured-product-info {
+  width: 110px;
+  margin-left: 50%;
+  left: -60px;
+}
+
+#content .featured-product-info h3 {
+  font-size: 11px;
+}
@@ -6,7 +6,7 @@ class EnvironmentDesignController; def rescue_action(e) raise e end; end
 class EnvironmentDesignControllerTest < Test::Unit::TestCase
-  ALL_BLOCKS = [ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock ]
+  ALL_BLOCKS = [ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock, FeaturedProductsBlock ]
   def setup
     @controller = EnvironmentDesignController.new
@@ -10,7 +10,7 @@ class ProfileDesignControllerTest &lt; Test::Unit::TestCase
   PERSON_BLOCKS_WITH_MEMBERS = PERSON_BLOCKS + [MembersBlock]
   PERSON_BLOCKS_WITH_BLOG = PERSON_BLOCKS + [BlogArchivesBlock]
-  ENTERPRISE_BLOCKS = COMMOM_BLOCKS + [DisabledEnterpriseMessageBlock, HighlightsBlock]
+  ENTERPRISE_BLOCKS = COMMOM_BLOCKS + [DisabledEnterpriseMessageBlock, HighlightsBlock, FeaturedProductsBlock]
   ENTERPRISE_BLOCKS_WITH_PRODUCTS_ENABLE = ENTERPRISE_BLOCKS + [ProductsBlock]
   attr_reader :holder
@@ -579,6 +579,11 @@ class ApplicationHelperTest &lt; Test::Unit::TestCase
     assert_equal 'filename.mp3', short_filename('filename.mp3')
   end
+  include ActionView::Helpers::NumberHelper
+  should 'format float to money as Brazillian currency' do
+    assert_equal 'R$10,00', float_to_currency(10.0)
+  end
+
   protected
   def url_for(args = {})
@@ -377,4 +377,22 @@ class EnterpriseTest &lt; Test::Unit::TestCase
     ent = Enterprise.create!(:name => 'test enteprise', :identifier => 'test_ent')
     assert_equal 3, ent.boxes.size
   end
+
+  should 'collect the highlighted products with image' do
+    env = Environment.default
+    e1 = fast_create(Enterprise)
+    p1 = e1.products.create!(:name => 'test_prod1')
+    products = []
+    3.times {|n|
+      products.push(Product.create!(:name => "product #{n}", :enterprise_id => e1.id, :highlighted => true, :image_builder => { 
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      }))
+    }
+    Product.create!(:name => "product 4", :enterprise_id => e1.id, :highlighted => true)
+    Product.create!(:name => "product 5", :enterprise_id => e1.id, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      })
+    assert_equal products, e1.highlighted_products_with_image
+  end
+
 end
@@ -374,6 +374,23 @@ class EnvironmentTest &lt; Test::Unit::TestCase
     assert_includes env.products, p1
   end
+  should 'collect the highlighted products with image through enterprises' do
+    env = Environment.default
+    e1 = fast_create(Enterprise)
+    p1 = e1.products.create!(:name => 'test_prod1')
+    products = []
+    3.times {|n|
+      products.push(Product.create!(:name => "product #{n}", :enterprise_id => e1.id, :highlighted => true, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      }))
+    }
+    Product.create!(:name => "product 4", :enterprise_id => e1.id, :highlighted => true)
+    Product.create!(:name => "product 5", :enterprise_id => e1.id, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      })
+    assert_equal products, env.highlighted_products_with_image
+  end
+
   should 'not have person through communities' do
     env = Environment.default
     com = fast_create(Community)
@@ -0,0 +1,127 @@
+require File.dirname(__FILE__) + '/../test_helper'
+
+class FeaturedProductsBlockTest < ActiveSupport::TestCase
+
+  def setup
+    @profile = fast_create(Profile)
+    @environment = Environment.default
+    @environment.boxes << Box.new
+  end
+  attr_reader :profile
+
+  should 'refer to products' do
+    products = []
+    3.times {|n| products.push(Product.create!(:name => "product #{n}", :enterprise_id => profile.id)) }
+    featured_products_block = FeaturedProductsBlock.create!(:product_ids => products.map(&:id))
+    assert_equal products, featured_products_block.products
+  end
+
+  should "have method products_for_selection" do
+    block = FeaturedProductsBlock.new
+    assert_respond_to block, 'products_for_selection'
+  end
+
+  should " the defaul product_ids be an empty array" do
+    block = FeaturedProductsBlock.new
+    assert_equal [], block.product_ids
+  end
+
+  should " the defaul groups_of be 3" do
+    block = FeaturedProductsBlock.new
+    assert_equal 3, block.groups_of
+  end
+
+  should 'default interval between transitions is 1000 miliseconds' do
+    block = FeaturedProductsBlock.new
+    assert_equal 1000, block.speed
+  end
+
+  should "reflect by default" do
+    block = FeaturedProductsBlock.new
+    assert_equal true, block.reflect
+  end
+
+  should 'describe itself' do
+    assert_not_equal Block.description, FeaturedProductsBlock.description
+  end
+
+  should "the groups_of variabe be a integer" do
+    block = FeaturedProductsBlock.new
+    assert_kind_of Integer, block.groups_of
+    block.groups_of = 2
+    block.save
+    block.reload
+    assert_kind_of Integer, block.groups_of
+    block.groups_of = '2'
+    block.save
+    block.reload
+    assert_kind_of Integer, block.groups_of
+  end
+
+  should "an environment block collect product automatically" do
+    block = FeaturedProductsBlock.new()
+    block.product_ids = []
+    enterprise = Enterprise.create!(:name => "My enterprise", :identifier => 'myenterprise', :environment => @environment)
+    3.times {|n|
+      Product.create!(:name => "product #{n}", :enterprise_id => enterprise.id, :highlighted => true, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      })
+    }
+    @environment.boxes.first.blocks<< block
+
+    assert_not_equal [], block.product_ids
+  end
+
+  should "an environment block collect just product with image automatically" do
+    block = FeaturedProductsBlock.new()
+    block.product_ids = []
+    enterprise = Enterprise.create!(:name => "My enterprise", :identifier => 'myenterprise', :environment => @environment)
+    3.times {|n|
+      Product.create!(:name => "product #{n}", :enterprise_id => enterprise.id, :highlighted => true)
+    }
+    @environment.boxes.first.blocks<< block
+
+    assert_equal [], block.product_ids
+  end
+
+  should "an environment block collect just highlighted product automatically" do
+    block = FeaturedProductsBlock.new()
+    block.product_ids = []
+    enterprise = Enterprise.create!(:name => "My enterprise", :identifier => 'myenterprise', :environment => @environment)
+    3.times {|n|
+      Product.create!(:name => "product #{n}", :enterprise_id => enterprise.id, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      })
+    }
+    @environment.boxes.first.blocks<< block
+
+    assert_equal [], block.product_ids
+  end
+
+  should 'display feature products block' do
+    block = FeaturedProductsBlock.new
+
+    self.expects(:render).with(:file => 'blocks/featured_products', :locals => { :block => block})
+    instance_eval(& block.content)
+  end
+
+  should "return just highlighted products with image for selection" do
+    block = FeaturedProductsBlock.new()
+    block.product_ids = []
+    enterprise = Enterprise.create!(:name => "My enterprise", :identifier => 'myenterprise', :environment => @environment)
+    products = []
+    3.times {|n|
+      products.push(Product.create!(:name => "product #{n}", :enterprise_id => enterprise.id, :highlighted => true, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      }))
+    }
+    Product.create!(:name => "product 4", :enterprise_id => enterprise.id, :highlighted => true)
+    Product.create!(:name => "product 5", :enterprise_id => enterprise.id, :image_builder => {
+        :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png')
+      })
+    @environment.boxes.first.blocks<< block
+
+    assert_equal products, block.products_for_selection
+  end
+
+end
@@ -119,12 +119,14 @@ class HighlightsBlockTest &lt; ActiveSupport::TestCase
     i1 = {:image_id => 1, :address => '/address', :position => 3, :title => 'address'}
     i2 = {:image_id => 2, :address => '/address', :position => 1, :title => 'address'}
     i3 = {:image_id => 3, :address => '/address', :position => 2, :title => 'address'}
-    block.images = [i1,i2,i3]
+    i4 = {:image_id => 4, :address => '/address', :position => 5, :title => 'address'}
+    i5 = {:image_id => 5, :address => '/address', :position => 4, :title => 'address'}
+    block.images = [i1,i2,i3,i4,i5]
     block.shuffle = true
     block.save!
     block.reload
-    assert_equal [i1,i2,i3], block.images
-    assert_not_equal [i2,i3,i1], block.featured_images
+    assert_equal [i1,i2,i3,i4,i5], block.images
+    assert_not_equal [i2,i3,i1,i4,i5], block.featured_images
   end
 end
	@@ -3,7 +3,7 @@ class EnvironmentDesignController < BoxOrganizerController		@@ -3,7 +3,7 @@ class EnvironmentDesignController < BoxOrganizerController
3	protect 'edit_environment_design', :environment	3	protect 'edit_environment_design', :environment
4		4
5	def available_blocks	5	def available_blocks
6	- @available_blocks \|\|= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock ]	6	+ @available_blocks \|\|= [ ArticleBlock, LoginBlock, EnvironmentStatisticsBlock, RecentDocumentsBlock, EnterprisesBlock, CommunitiesBlock, PeopleBlock, SellersSearchBlock, LinkListBlock, FeedReaderBlock, SlideshowBlock, HighlightsBlock, FeaturedProductsBlock ]
7	end	7	end
8		8
9	end	9	end
	@@ -24,6 +24,7 @@ class ProfileDesignController < BoxOrganizerController		@@ -24,6 +24,7 @@ class ProfileDesignController < BoxOrganizerController
24	if profile.enterprise?	24	if profile.enterprise?
25	blocks << DisabledEnterpriseMessageBlock	25	blocks << DisabledEnterpriseMessageBlock
26	blocks << HighlightsBlock	26	blocks << HighlightsBlock
		27	+ blocks << FeaturedProductsBlock
27	end	28	end
28		29
29	# product block exclusive for enterprises in environments that permits it	30	# product block exclusive for enterprises in environments that permits it
	@@ -960,4 +960,9 @@ module ApplicationHelper		@@ -960,4 +960,9 @@ module ApplicationHelper
960	text_field_tag(name, value, options.merge(:class => 'colorpicker_field'))	960	text_field_tag(name, value, options.merge(:class => 'colorpicker_field'))
961	end	961	end
962		962
		963	+ # for now force currency to Brazillian format, like: "12.345,20"
		964	+ def float_to_currency(price)
		965	+ number_to_currency(price, :unit => 'R$', :separator => ',', :delimiter => '.')
		966	+ end
		967	+
963	end	968	end
	@@ -628,4 +628,9 @@ class Environment < ActiveRecord::Base		@@ -628,4 +628,9 @@ class Environment < ActiveRecord::Base
628	end	628	end
629	end	629	end
630		630
		631	+ def highlighted_products_with_image(options = {})
		632	+ Product.find(:all, {:conditions => {:highlighted => true, :enterprise_id => self.enterprises.find(:all, :select => :id) }, :joins => :image}.merge(options))
		633	+ end
		634	+
631	end	635	end
		636	+
@@ -0,0 +1,35 @@		@@ -0,0 +1,35 @@
	1	+class FeaturedProductsBlock < Block
	2	+
	3	+ settings_items :product_ids, :type => Array, :default => []
	4	+ settings_items :groups_of, :type => :integer, :default => 3
	5	+ settings_items :speed, :type => :integer, :default => 1000
	6	+ settings_items :reflect, :type => :boolean, :default => true
	7	+
	8	+ before_save do \|block\|
	9	+ if block.owner.kind_of?(Environment) && block.product_ids.blank?
	10	+ seed = block.owner.products.count
	11	+ block.product_ids = block.owner.highlighted_products_with_image(:offset => (rand(seed) % (seed - block.groups_of * 3)), :limit => block.groups_of * 3).map(&:id)
	12	+ end
	13	+ block.groups_of = block.groups_of.to_i
	14	+ end
	15	+
	16	+ def self.description
	17	+ _('Featured Products')
	18	+ end
	19	+
	20	+ def products
	21	+ Product.find(self.product_ids) \|\| []
	22	+ end
	23	+
	24	+ def products_for_selection
	25	+ self.owner.highlighted_products_with_image
	26	+ end
	27	+
	28	+ def content
	29	+ block = self
	30	+ lambda do
	31	+ render :file => 'blocks/featured_products', :locals => { :block => block }
	32	+ end
	33	+ end
	34	+
	35	+end
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+<%= block_title(block.title) %>
	2	+<% unless block.products.blank? %>
	3	+ <%= link_to content_tag(:span, _('Previous')), '#', :class => 'featured-product-prev featured-product-arrow' %>
	4	+ <div class="featured-products-block-container">
	5	+ <ul class="featured-products-list">
	6	+ <% block.products.in_groups_of(block.groups_of).each do \|group\| %>
	7	+ <li class="featured-products-group">
	8	+ <div class="featured-product-items">
	9	+ <ul>
	10	+ <% group.reject{ \|x\| x.nil? }.each_with_index do \|p, i\| %>
	11	+ <li class="featured-product-item">
	12	+ <%= link_to content_tag(:img, nil, :src => p.image.public_filename(:thumb), :alt => p.name, :class => ('reflect' if block.reflect)), product_path(p.enterprise.identifier, p), :class => 'featured-product-image' %>
	13	+ <div class="featured-product-info position-<%= i + 1 %>" style="display: none">
	14	+ <div class="featured-product-text">
	15	+ <h3><%= p.name %></h3>
	16	+ <p class="featured-product-price"><%= float_to_currency(p.price) %></p>
	17	+ <p class="featured-product-desc"><%= p.description.chars[0...50].to_s + '...' %></p>
	18	+ <p><%= link_to _('See More'), product_path(p.enterprise.identifier, p), :class => 'featured-product-link' %></p>
	19	+ </div>
	20	+ </div>
	21	+ </li>
	22	+ <% end %>
	23	+ </ul>
	24	+ </div>
	25	+ </li>
	26	+ <% end %>
	27	+ </ul>
	28	+ </div>
	29	+ <%= link_to content_tag(:span, _('Next')), '#', :class => 'featured-product-next featured-product-arrow' %>
	30	+ <script type="text/javascript">
	31	+ (function($) {
	32	+ var options = {
	33	+ fx : 'scrollHorz',
	34	+ timeout: 0,
	35	+ prev: '#block-<%= block.id %> .featured-product-prev',
	36	+ next: '#block-<%= block.id %> .featured-product-next',
	37	+ speed: <%= block.speed \|\| 2000 %>
	38	+ }
	39	+ $('#block-<%= block.id %> .featured-products-list').cycle(options);
	40	+
	41	+ $(document).ready(function(){
	42	+ $(".featured-product-item").hover(
	43	+ function() {
	44	+ $(".featured-product-info", this).fadeIn('slow');
	45	+ },
	46	+ function() {
	47	+ $(".featured-product-info", this).fadeOut('slow');
	48	+ });
	49	+ });
	50	+ })(jQuery);
	51	+ </script>
	52	+ <p class="featured-products-footer"></p>
	53	+<% else %>
	54	+ <em><%= _('Please, edit this block and choose some products') %></em>
	55	+<% end %>
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+<strong><%= _('Featured Products') %></strong>
	2	+<div id='edit-featured-products-block'>
	3	+ <p><%= label_tag _('Choose some products') %></p>
	4	+ <p><%= select_tag 'block[product_ids][]', options_for_select(@block.products_for_selection.map{\|p\| [p.name, p.id.to_s]}, @block.product_ids), :multiple => true %></p>
	5	+ <p><%= labelled_form_field check_box(:block, :reflect) + _('Reflect products'), '' %></p>
	6	+ <p><%= labelled_form_field(_('Transition speed (in seconds)'), select('block', 'speed', (1..10).to_a.collect{\|i\| [i, i*1000] })) %>
	7	+ <p><%= labelled_form_field(_('In groups of'), select('block', 'groups_of', (1..10).to_a)) %>
	8	+</div>
@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
	1	+class AddHighlightedToProduct < ActiveRecord::Migration
	2	+ def self.up
	3	+ add_column :products, :highlighted, :boolean
	4	+ end
	5	+
	6	+ def self.down
	7	+ remove_column :products, :highlighted
	8	+ end
	9	+end
@@ -0,0 +1,177 @@		@@ -0,0 +1,177 @@
	1	+/**
	2	+ * reflection.js v2.0
	3	+ * http://cow.neondragon.net/stuff/reflection/
	4	+ * Freely distributable under MIT-style license.
	5	+ */
	6	+
	7	+/* From prototype.js */
	8	+if (!document.myGetElementsByClassName) {
	9	+ document.myGetElementsByClassName = function(className) {
	10	+ var children = document.getElementsByTagName('*') \|\| document.all;
	11	+ var elements = new Array();
	12	+
	13	+ for (var i = 0; i < children.length; i++) {
	14	+ var child = children[i];
	15	+ var classNames = child.className.split(' ');
	16	+ for (var j = 0; j < classNames.length; j++) {
	17	+ if (classNames[j] == className) {
	18	+ elements.push(child);
	19	+ break;
	20	+ }
	21	+ }
	22	+ }
	23	+ return elements;
	24	+ }
	25	+}
	26	+
	27	+var Reflection = {
	28	+ defaultHeight : 0.5,
	29	+ defaultOpacity: 0.5,
	30	+
	31	+ add: function(image, options) {
	32	+ Reflection.remove(image);
	33	+
	34	+ doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
	35	+ if (options) {
	36	+ for (var i in doptions) {
	37	+ if (!options[i]) {
	38	+ options[i] = doptions[i];
	39	+ }
	40	+ }
	41	+ } else {
	42	+ options = doptions;
	43	+ }
	44	+
	45	+ try {
	46	+ var d = document.createElement('div');
	47	+ var p = image;
	48	+
	49	+ var classes = p.className.split(' ');
	50	+ var newClasses = '';
	51	+ for (j=0;j<classes.length;j++) {
	52	+ if (classes[j] != "reflect") {
	53	+ if (newClasses) {
	54	+ newClasses += ' '
	55	+ }
	56	+
	57	+ newClasses += classes[j];
	58	+ }
	59	+ }
	60	+
	61	+ var reflectionHeight = Math.floor(p.height*options['height']);
	62	+ var divHeight = Math.floor(p.height*(1+options['height']));
	63	+
	64	+ var reflectionWidth = p.width;
	65	+
	66	+ if (document.all && !window.opera) {
	67	+ /* Fix hyperlinks */
	68	+ if(p.parentElement.tagName == 'A') {
	69	+ var d = document.createElement('a');
	70	+ d.href = p.parentElement.href;
	71	+ }
	72	+
	73	+ /* Copy original image's classes & styles to div */
	74	+ d.className = newClasses;
	75	+ p.className = 'reflected';
	76	+
	77	+ d.style.cssText = p.style.cssText;
	78	+ p.style.cssText = 'vertical-align: bottom';
	79	+
	80	+ var reflection = document.createElement('img');
	81	+ reflection.src = p.src;
	82	+ reflection.style.width = reflectionWidth+'px';
	83	+ reflection.style.display = 'block';
	84	+ reflection.style.height = p.height+"px";
	85	+
	86	+ reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
	87	+ reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']100)+')';
	88	+
	89	+ d.style.width = reflectionWidth+'px';
	90	+ d.style.height = divHeight+'px';
	91	+ p.parentNode.replaceChild(d, p);
	92	+
	93	+ d.appendChild(p);
	94	+ d.appendChild(reflection);
	95	+ } else {
	96	+ var canvas = document.createElement('canvas');
	97	+ if (canvas.getContext) {
	98	+ /* Copy original image's classes & styles to div */
	99	+ d.className = newClasses;
	100	+ p.className = 'reflected';
	101	+
	102	+ d.style.cssText = p.style.cssText;
	103	+ p.style.cssText = 'vertical-align: bottom';
	104	+
	105	+ var context = canvas.getContext("2d");
	106	+
	107	+ canvas.style.height = reflectionHeight+'px';
	108	+ canvas.style.width = reflectionWidth+'px';
	109	+ canvas.height = reflectionHeight;
	110	+ canvas.width = reflectionWidth;
	111	+
	112	+ d.style.width = reflectionWidth+'px';
	113	+ d.style.height = divHeight+'px';
	114	+ p.parentNode.replaceChild(d, p);
	115	+
	116	+ d.appendChild(p);
	117	+ d.appendChild(canvas);
	118	+
	119	+ context.save();
	120	+
	121	+ context.translate(0,image.height-1);
	122	+ context.scale(1,-1);
	123	+
	124	+ context.drawImage(image, 0, 0, reflectionWidth, image.height);
	125	+
	126	+ context.restore();
	127	+
	128	+ context.globalCompositeOperation = "destination-out";
	129	+ var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
	130	+
	131	+ gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
	132	+ gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
	133	+
	134	+ context.fillStyle = gradient;
	135	+ context.rect(0, 0, reflectionWidth, reflectionHeight*2);
	136	+ context.fill();
	137	+ }
	138	+ }
	139	+ } catch (e) {
	140	+ }
	141	+ },
	142	+
	143	+ remove : function(image) {
	144	+ if (image.className == "reflected") {
	145	+ image.className = image.parentNode.className;
	146	+ image.parentNode.parentNode.replaceChild(image, image.parentNode);
	147	+ }
	148	+ }
	149	+}
	150	+
	151	+function addReflections() {
	152	+ var rimages = document.myGetElementsByClassName('reflect');
	153	+ for (i=0;i<rimages.length;i++) {
	154	+ var rheight = null;
	155	+ var ropacity = null;
	156	+
	157	+ var classes = rimages[i].className.split(' ');
	158	+ for (j=0;j<classes.length;j++) {
	159	+ if (classes[j].indexOf("rheight") == 0) {
	160	+ var rheight = classes[j].substring(7)/100;
	161	+ } else if (classes[j].indexOf("ropacity") == 0) {
	162	+ var ropacity = classes[j].substring(8)/100;
	163	+ }
	164	+ }
	165	+
	166	+ Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
	167	+ }
	168	+}
	169	+
	170	+if (window.addEventListener) { // DOM method for binding an event
	171	+ window.addEventListener("load", addReflections, false);
	172	+} else if (window.attachEvent) { // IE exclusive method for binding an event
	173	+ window.attachEvent("onload", addReflections);
	174	+} else { // Support older browsers
	175	+ var previousOnload = window.onload;
	176	+ window.onload = function() { if (previousOnload) previousOnload(); addReflections(); }
	177	+}
	@@ -3692,3 +3692,110 @@ h1#agenda-title {		@@ -3692,3 +3692,110 @@ h1#agenda-title {
3692	.highlights-image-link {	3692	.highlights-image-link {
3693	border: 1px solid #ccc;	3693	border: 1px solid #ccc;
3694	}	3694	}
		3695	+
		3696	+/* Featured Products stuff */
		3697	+
		3698	+.featured-product-items {
		3699	+ width: 100%;
		3700	+ display: table;
		3701	+ margin: 0 auto;
		3702	+ text-align: center;
		3703	+}
		3704	+
		3705	+.featured-product-items ul {
		3706	+ display: table-row;
		3707	+}
		3708	+
		3709	+.featured-product-item {
		3710	+ list-style-type: none;
		3711	+ display: table-cell !important;
		3712	+}
		3713	+
		3714	+.featured-product-item div {
		3715	+ margin: 0 auto;
		3716	+}
		3717	+
		3718	+.featured-products-list {
		3719	+ padding: 0;
		3720	+}
		3721	+
		3722	+.featured-product-arrow {
		3723	+ float: left;
		3724	+ width: 20px;
		3725	+ background-repeat: no-repeat;
		3726	+ height: 160px;
		3727	+ background-position: center 55px;
		3728	+}
		3729	+
		3730	+.featured-product-arrow span {
		3731	+ display: none;
		3732	+}
		3733	+
		3734	+.featured-product-prev {
		3735	+ background-image: url(/designs/icons/tango/Tango/16x16/actions/go-previous.png);
		3736	+}
		3737	+
		3738	+.featured-product-next {
		3739	+ background-image: url(/designs/icons/tango/Tango/16x16/actions/go-next.png);
		3740	+}
		3741	+
		3742	+.featured-products-block-container {
		3743	+ width: 92%;
		3744	+}
		3745	+
		3746	+.box-2 .featured-products-block-container,
		3747	+.box-3 .featured-products-block-container {
		3748	+ width: 78%;
		3749	+}
		3750	+
		3751	+.featured-products-group {
		3752	+ width: 100%;
		3753	+ margin: 0 auto;
		3754	+ text-align: center;
		3755	+}
		3756	+
		3757	+.featured-product-desc {
		3758	+ display: none;
		3759	+}
		3760	+
		3761	+.featured-products-block-container,
		3762	+.featured-products-group {
		3763	+ overflow: hidden;
		3764	+ float: left;
		3765	+ height: 160px;
		3766	+ position: relative;
		3767	+}
		3768	+
		3769	+.featured-products-group ul {
		3770	+ padding: 0;
		3771	+ padding-left: 4px;
		3772	+}
		3773	+
		3774	+.featured-products-footer {
		3775	+ clear: both;
		3776	+}
		3777	+
		3778	+.featured-product-info {
		3779	+ position: absolute;
		3780	+ top: 0;
		3781	+ z-index: 9999;
		3782	+ height: 125px;
		3783	+ overflow: hidden;
		3784	+ font-size: 11px;
		3785	+ background-color: #fff;
		3786	+ opacity: 0.7;
		3787	+ border: 1px solid #333;
		3788	+ padding: 5px;
		3789	+ text-align: left;
		3790	+}
		3791	+
		3792	+.box-2 .featured-product-info,
		3793	+.box-3 .featured-product-info {
		3794	+ width: 110px;
		3795	+ margin-left: 50%;
		3796	+ left: -60px;
		3797	+}
		3798	+
		3799	+#content .featured-product-info h3 {
		3800	+ font-size: 11px;
		3801	+}