AnimationExtender problem inside a GridView

[vinidel]

I'm trying to put an animationextender + div + the javascript it comes with inside an <itemTemplate>.

It works fine, but only for the first row of the gridview, which it opens, closes and updates.

When I click the button that starts the animation on any other row, it simply shows the animation section of the first row, as if I pressed the button on the first row.

Any idea on that? Should I do anything special when putting an animationextender inside a template column?

<div id ="Worst5">
<asp:Label ID="Label43" runat="server" CssClass="DivHeaders" Text="The 5 poorest assets (Over 5000 GSF)"></asp:Label>
<asp:GridView ID="Poorest5GridView" runat="server" AutoGenerateColumns="False" CssClass="grid" DataSourceID="Poorest5SqlDataSource" HeaderStyle-CssClass="gridHeader">
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<AlternatingRowStyle BackColor="#B8C8E6" />
<HeaderStyle CssClass="gridHeader" />
<Columns>
<asp:BoundField DataField="RN" HeaderText="Row No.">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Region_ID" HeaderText="Region ID">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:TemplateField HeaderText="test">
<ItemTemplate>
<asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="start animation" />
<!-- "Wire frame" div used to transition from the button to the info panel -->
<div id="flyout" class="wireFrame"></div>
<!-- Info panel to be displayed as a flyout when the button is clicked -->
<div id="info" style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progidXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
<div id="btnCloseParent" style="float: right; opacity: 100; filter: progidXImageTransform.Microsoft.Alpha(opacity=100);">
<asp:LinkButton id="btnClose" runat="server"
OnClientClick="return false;"
Text="X" ToolTip="Close"
Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
</div>
Once you get the general idea of the animation's markup, you'll want to play a bit. All of
the animations are created from simple, reusable building blocks that you can compose together.
Before long you'll be creating dazzling visuals. By grouping steps together and specifying
them to be run either in sequence or in parallel, you'll achieve almost anything you can
imagine, without writing a single line of code!
</div>

<script type="text/javascript" language="javascript">
// Move an element directly on top of another element (and optionally
// make it the same size)
function Cover(bottom, top, ignoreSize) {
var location = Sys.UI.DomElement.getLocation(bottom);
top.style.position = 'absolute';
top.style.top = location.y + 'px';
top.style.left = location.x + 'px';
if (!ignoreSize) {
top.style.height = bottom.offsetHeight + 'px';
top.style.width = bottom.offsetWidth + 'px';
}
}
</script>

<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button so it can't be clicked again --%>
<EnableAction Enabled="false" />
<%-- Position the wire frame and show it --%>
<ScriptAction Script="Cover($get('btnInfo'), $get('flyout'));" />
<StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Width="260" Height="280" />
<Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>
<ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
<FadeIn AnimationTarget="info" Duration=".2"/>
<StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Shrink the panel out of view --%>
<StyleAction Attribute="overflow" Value="hidden"/>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the target --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="250px"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<%-- Enable the button --%>
<EnableAction AnimationTarget="btnInfo" Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField ButtonType="Link" DataTextField="Center_Name" HeaderText="Center Name" >
<ItemStyle HorizontalAlign="Left" />
</asp:ButtonField>
<asp:BoundField DataField="Installation_Name" HeaderText="Installation Name">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="FCI" HeaderText="Condition Index">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="Utilz_Percent" HeaderText="Utilization %">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="Operating_Cost_GSF" HeaderText="Operating Cost/GSF">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="Poorest5SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="WITH a AS&#13;&#10; (SELECT ROW_NUMBER () OVER (ORDER BY condition_index ASC NULLS LAST,&#13;&#10; utilization_percent ASC,&#13;&#10; operating_cost_gsf DESC) rn,&#13;&#10; region_id, center_name, installation_name,&#13;&#10; (condition_index || '%') fci,&#13;&#10; (utilization_percent || '%') utilz_percent,&#13;&#10; TO_CHAR (operating_cost_gsf, '$0.99') operating_cost_gsf&#13;&#10; FROM frpp_report@prod&#13;&#10; WHERE record_type = 'REGULAR'&#13;&#10; AND frpp_run_id IS NULL&#13;&#10; AND region_id <= 6&#13;&#10; AND property_type <> 'Land'&#13;&#10; AND gsf > 5000&#13;&#10; ORDER BY condition_index ASC NULLS LAST,&#13;&#10; utilization_percent ASC,&#13;&#10; operating_cost_gsf)&#13;&#10;SELECT *&#13;&#10; FROM a&#13;&#10; WHERE rn < 6&#13;&#10;ORDER BY rn">
</asp:SqlDataSource>
</div>