ASP.NET/AJAX - Timer not working correct

Question

Hi,

I'm trying to make an webapplication where you see an Ajax countdown timer. Whenever I push a button the countdown should go back to 30 and keep counting down.

Now the problem is whenever I push the button the timer keeps counting down for a second or 2 and most of the time after that the timer keeps standing on 30 for to long.

WebForm code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="geen verbinding"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>

</form>

Code Behind:

static int timer = 30;
protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = timer.ToString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
    timer--;

}
protected void Button1_Click(object sender, EventArgs e)
{
    timer = 30;         
}

Hope somebody knows what the problem is and if there is anyway to fix this.

Thanks in advance!