<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html/xml; charset=utf-8"/>
    <meta name="author" content="Richard Milton, Centre for Advanced Spatial Analysis (CASA), University College London (UCL)">
    <meta name="description" content="Page automatically created by GMapImageCutter created by CASA">
    <meta name="keywords" content="Google, Maps, Image, Images, Tile, Cutter, GMapImageCutter, GMapCreator">
    <title>Picture Viewer</title>

    <style type="text/css">
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    //<![CDATA[
    var centreLat=0.0;
    var centreLon=0.0;
    var initialZoom=4;
    var imageWraps=true; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND

    var map; //the GMap3 itself
    var gmicMapType;

    function GMICMapType() {
        this.Cache = Array();
        this.opacity = 1.0;
    }
    GMICMapType.prototype.tileSize = new google.maps.Size(256, 256);
    GMICMapType.prototype.maxZoom = 19;
    GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
        var c = Math.pow(2, zoom);
        var c = Math.pow(2, zoom);
        var tilex=coord.x,tiley=coord.y;
        if (imageWraps) {
		if (tilex<0) tilex=c+tilex%c;
        	if (tilex>=c) tilex=tilex%c;
        	if (tiley<0) tiley=c+tiley%c;
        	if (tiley>=c) tiley=tiley%c;
	}
	else {
		if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c))
		{
			var blank = ownerDocument.createElement('DIV');
			blank.style.width = this.tileSize.width + 'px';
			blank.style.height = this.tileSize.height + 'px';
			return blank;
		}
	}
	var img = ownerDocument.createElement('IMG');
        var d = tilex;
        var e = tiley;
        var f = "t";
        for (var g = 0; g < zoom; g++) {
            c /= 2;
            if (e < c) {
                if (d < c) { f += "q" }
                else { f += "r"; d -= c }
            }
            else {
                if (d < c) { f += "t"; e -= c }
                else { f += "s"; d -= c; e -= c }
            }
        }
        img.id = "t_" + f;
        img.style.width = this.tileSize.width + 'px';
        img.style.height = this.tileSize.height + 'px';
        img.src = "chinese-tiles/"+f+".jpg";
        this.Cache.push(img);
        return img;
    }
    GMICMapType.prototype.realeaseTile = function(tile) {
        var idx = this.Cache.indexOf(tile);
        if(idx!=-1) this.Cache.splice(idx, 1);
        tile=null;
    }
    GMICMapType.prototype.name = "Image Cutter";
    GMICMapType.prototype.alt = "Image Cutter Tiles";
    GMICMapType.prototype.setOpacity = function(newOpacity) {
        this.opacity = newOpacity;
        for (var i = 0; i < this.Cache.length; i++) {
            this.Cache[i].style.opacity = newOpacity; //mozilla
            this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie
        }
    }

    function getWindowHeight() {
        if (window.self&&self.innerHeight) {
            return self.innerHeight;
        }
        if (document.documentElement&&document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
        return 0;
    }

    function resizeMapDiv() {
        //Resize the height of the div containing the map.

        //Do not call any map methods here as the resize is called before the map is created.
        var d=document.getElementById("map");

        var offsetTop=0;
        for (var elem=d; elem!=null; elem=elem.offsetParent) {
            offsetTop+=elem.offsetTop;

        }
        var height=getWindowHeight()-offsetTop-16;

        if (height>=0) {
            d.style.height=height+"px";
        }
    }

    function load() {
        resizeMapDiv();
        var latlng = new google.maps.LatLng(centreLat, centreLon);
        var myOptions = {
            zoom: initialZoom,
            minZoom: 3,
            maxZoom: 6,
            center: latlng,
            panControl: true,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: true,
            mapTypeControlOptions: { mapTypeIds: ["ImageCutter"] },
	    mapTypeId: "ImageCutter"
        }
        map = new google.maps.Map(document.getElementById("map"), myOptions);
	gmicMapType = new GMICMapType();
        map.mapTypes.set("ImageCutter",gmicMapType);

/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
//      var marker = new google.maps.Marker({
//          map:map,
//          position: new google.maps.LatLng(x,y),
//          title: "My Marker"
//      });
/////////////////////////////////////////////////////////////////////////////////////

    }


    //]]>
    </script>

  </head>

  <body onresize="resizeMapDiv()" onload="load()">

    <div id="map"></div>

  </body>

</html>
