var maxpictures = 5; //max. count

var loaded = 0;

var array_img = new Array();

var speed = 50;



function startslide()

{

    if (loaded==maxpictures)

    {

        for(var i in array_img)

        {

            cgf.drawImage(array_img[i],i*200,0); 

            slide(array_img[i],i*200);

        }

    }else

    {

        setTimeout("startslide();",100);        

    }

}



function load_img()

{

    var canvas = document.getElementById('canvas_id');

    if (canvas.getContext)

    {

        cgf = canvas.getContext('2d'); //global

        for(j = 1; j <= maxpictures; j++)

        {        

            var image = new Image();

            image.src="fileadmin/design/header/"+j+".jpg";    //image source

            if(j == maxpictures) //last image triggers drawing method

            {

                image.onload = function() //onload-event of the last image

                {

                    loaded++;                    

                    startslide(array_img); //check if all pictures are loaded and start slide 

                }

            }else

            {

                image.onload = function()

                {

                loaded++;

                }

            }

            array_img.push(image); //copy into array

            delete(image); //free

        }

    }



}



function slide(image,i){

    i--;

    if(i == -1)

    {

        cgf.drawImage(image,maxpictures*200,0); //draw new image at the beginning 

        slide(image,maxpictures*200); //start slide-function of new image

        cgf.drawImage(image,i,0); //draw the old image at current position 

        setTimeout(function(){slide(image,i);},speed); //continue slide of the current image (till i = -200)

    }

    else

    {

        if(i != -200) 

        {

        cgf.drawImage(image,i,0);

        setTimeout(function(){slide(image,i);},speed);

        }

    }

}