<!-- version 3: second attempt at buttons-->
<% content_for :head do %>
	<%= javascript_include_tag "smartphone/jquery.tools.min.js" %>
	<%= javascript_include_tag "smartphone/scrollable.js" %>
	<%= stylesheet_link_tag "smartphone/scrollableMin.css" %>
	<%= stylesheet_link_tag "smartphone/scrollable-buttons.css" %>
	<script type="text/javascript">
		$.noConflict();
	</script>
<% end -%>

<p class="sectionHeader">新着アイテム</p>

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   
   
   <!-- root element for the items -->
   <div id="scrollableContents" class="items">
		
    <%- unless @new_products.blank? -%>
			<div>
		<%- @new_products.each_with_index do | new_product, index | -%>
			<%- if index == 3 || index == 6 -%>
			<div>
			<%- end -%>
				<div class="img item">
					<%= link_to( "<span class='link'></span>", {:controller => "/products", :action => "show", :id => (new_product.id),:category_id => new_product.category_id}) %>
					<%= product_image_tag(new_product, :smartphone) %>
					<div class="desc"><%= new_product.name %></div>
				</div>
			<%- if index == 2 || index == 5 -%>
			</div>
			<%- end -%>
		<%- end -%>
			</div>
   <%- end -%>   
      
   </div>
   
</div>

<!-- "next page" action -->
<a class="next browse right"></a>

<br clear="all" /> 