[SOLVED] Custom TileSource is not working properly to load initial level image

Custom TileSource is not working properly to load initial level image

I am trying to make custom tile source, I have simple copy paste the code from here : https://openseadragon.github.io/examples/tilesource-custom/ But i can see the Output as per here : http://screencast.com/t/j7Qvh4URsX

and for the Images related output here.. http://screencast.com/t/nPSGdRRbkn

Here questions are :

1) what is the correct way to load images properly..i cant see there are much documentation for it. if any specific info please provide me..

2) why there is (level-8)... ?

3) How can i make it dynamic.. for example if i want to make load images from my PC related folders dynamically with ajax call using asp.net mvc.. is there any examples...

4) I have much read about but not exact info for custom tile source to load the images to show the output as on Demo page...

I am using below code currently, it will go later based on ajax call to load local folders - level0,1,2,3,4,5,6 etc

var viewer = OpenSeadragon({
    id: "example-custom-tilesource", showNavigator: true,
    wrapHorizontal: true,
    tileSources:   {
        height: 512*256,
        width:  512*256,
        tileSize: 256,
        minLevel: 8,
        getTileUrl: function (level, x, y)
        {
            console.log("URL::->"+ "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +(level-8) + "-r" + x + "-c" + y + ".jpg")
            return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
                    (level-8) + "-r" + x + "-c" + y + ".jpg";

        }
    }
});

Solution