Image slideshow using master page

Hello Reader!

I am trying to develop an image slideshow on a page. It works completely fine on its own but it doesn't work when working under a master page (It changes a picture when I refresh the page). Here is javascript in Default.aspx:

<img id="photo" src="" runat="server" border="0" />

<script type="text/javascript">
        //A timer will be fired in 5 seconds to call getNextImage()
        var c_interval = 5000;
        window.setTimeout("getNextImage()", c_interval);
        
        function getNextImage()
        {
            //Send the request to server with the current image url as the argument
            CallServer(document.getElementById("photo").src, "");
        }
                  
        function ReceiveServerData(rValue)
        {
            //Receive server's response of a string rValue, which is prepared in the server's function
            //GetCallbackResult()
            var wds = rValue.split(";");
            //Assign the transition effect
            document.getElementById("photo").style.filter = wds[1];
            //Preload the image file from server.  When finishing download, imageLoaded function will be called
            //with the img object as the argument                           
            var img  = new Image();
            img.onload = function(){ imageLoaded(this); }
            img.onerror = function(){ imageError(this); }
            img.onabort = function(){ imageError(this); }
            img.src = wds[0];                                            
        }
        function imageError(img)
        {
            //If image download errors occur, this function will be called.
            window.setTimeout("getNextImage()", 1000);
        }
        function imageLoaded(img)
        {
            var photo = document.getElementById("photo");   //Find the image control object
            photo.filters[0].apply();                       //Apply the transition effect
            photo.filters[0].play();                        //Play the effect and display the new image
            photo.src = img.src;                            //Assign the image to the image control
            window.setTimeout("getNextImage()", c_interval);//Initiate the next request
        }
    </script>

and here is the code in Default.aspx.cs

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
    string m_lastFileName = "none";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
            return;
        
        //photo.Src = GetNextImageUrl();
      

        //Register Ajax client script to client's browsers.  This has to be hard coded.
        string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
        string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
    }
    public void RaiseCallbackEvent(string eventArgument)
    {
        //This is first place to receive the callback from client's browser.  The parameter 'eventArgument'
        //is the parameter passed from the Javascript's call 'CallServer()'.  In this example, it is the
        //last image url.
        
        m_lastFileName = Path.GetFileName(eventArgument);
    }

    public string GetCallbackResult()
    {
        //This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string
        //to the client.  Here the returned string is the image url and the transition effect.
        return GetNextImageUrl() + ";" + GetNextTransition();
    }

Any help would be appreciated and thanks for your precious time.

Cheers!

Mujtaba