var map;
var baseIcon;
var categories = 0;
var ALL_CATEGORIES = 2047;
var controlPhoto; 

function loadmap() 
{
    try{
	    map = new VEMap('map');   
	    map.HideDashboard();         
	    map.LoadMap(new VELatLong(39.910526, 116.399202), 11 ,'a' ,false);
	    map.AttachEvent("onchangeview", MapChanged);
	    try{
	        window.onresize = repaintControls;
	    }catch(e){
	        //alert(e.message);
	    }
	    //map.ClearInfoBoxStyles();
	    GetPointsForLocation();
	    addControls(map);
	    map.AttachEvent("onclick",ShapeInfo2);
	}catch(e){
	    
	}
/*
	if (GBrowserIsCompatible()) 
	{
		G_NORMAL_MAP.getTileLayers()[0].getOpacity = function () {return 0.8;};
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(51.51301590715673, -0.1078033447265625), 11);
        
        GEvent.addListener(map, "moveend", MapChanged);
		baseIcon = new GIcon();
		baseIcon.iconSize = new GSize(30, 36);
		//baseIcon.shadowSize = new GSize(28, 25);
		baseIcon.iconAnchor = new GPoint(30, 36);
		//baseIcon.shadow = "http://localhost:49312/map_iconshadow.png";
		baseIcon.image = "/images/map/mapicon_1.png";
		baseIcon.infoWindowAnchor = new GPoint(30, 36);
		//baseIcon.infoShadowAnchor = new GPoint(18, 25);
		
		GetPointsForLocation();
		//addVideoPoint(51.51448481244648, -0.148057937622070, 24, "Doghouse", "Sweatshop run by a cruel designer", "/temp_canine_office.html");
		//addVideoPoint(51.50832844719602, -0.12145042419433594, 24, "Doghouse", "Sweatshop run by a cruel designer", "/temp_canine_office.html");
		
		var divMap = document.getElementById("map");
		divMap.style.backgroundColor="#000000";
	}
	*/
}


function addVideoPoint(map, latitude, longitude, iconnumber, title, description, link, thumbailURL)
{
	var latlng = new VELatLong(latitude, longitude);
	var pin = new VEShape(VEShapeType.Pushpin, latlng);
    var icon = new VECustomIconSpecification();
    icon.Image = "/beijing/images/map/mapicon_" + iconnumber + ".png";
    icon.ImageOffset = new VEPixel(-15, -18);
    icon.TextContent = " ";
    
    if(description.length > 190){
        description = description.substring(0, 190)+" ...";
    }
    var cotainerTable = "<table border='0' cellspacing='0' cellpadding='3'><tr><td valign='top'>" +
                        "<img alt='thumbnail' src='../essences/"+thumbailURL+".png'></br>"+
                        "<img id='PlayVideo" + iconnumber + "' src='/beijing/images/download/play-button.png' " + "onmouseover=\"MM_swapImage('PlayVideo" + iconnumber + "','','/beijing/images/download/play-button_roll.png',1)\" onmouseout='MM_swapImgRestore()' onclick=\"playButtonUserVIdeoList('/beijing/videoPage/PlayVideo.aspx?id=" + link + "')\"/>" +
                        "</td>"+
                        "<td>"+
                        "<div><b><label class='inboxTitle' style='font-family:Georgia, font-size:9px'>"+title+"</label></b><br></br><label class='inboxDescription'>"+description+"</label>"+
                        "</div></td>"+
                        "</tr></table>";
    pin.SetCustomIcon(icon);
    //pin.SetTitle(title);
    pin.SetDescription(cotainerTable);

    pin.SetMoreInfoURL("/beijing/videoPage/PlayVideo.aspx?id=" + link);
    map.AddShape(pin);
    
}

function ShapeInfo2(e){
   
   if(e!= null && e.elementID)
   {
       var shape = map.GetShapeByID(e.elementID);
       var point = null;
       if(shape.GetType() == VEShapeType.Pushpin){
        
           playButtonUserVIdeoList(shape.GetMoreInfoURL());
       }
       //var zoom = map.GetZoomLevel() + 1;
       //map.SetCenterAndZoom(point, zoom);
   }
}


function addVideoPointMini(map, latlng, iconnumber)
{
	var pin = new VEShape(VEShapeType.Pushpin, latlng);
    var icon = new VECustomIconSpecification();
    icon.Image = "/beijing/images/map/mapicon_" + iconnumber + ".png";
    icon.ImageOffset = new VEPixel(-15, -18);
    icon.TextContent = " ";
    
    pin.SetCustomIcon(icon);
    map.AddShape(pin);
}

function repaintControls(e){
    var controls = map.controls;
    while(controls.length>0){
        map.DeleteControl(controls[0]);
    }
    addControls(map);
    
    var mapStyle = map.GetMapStyle();
    
    if(mapStyle == VEMapStyle.Birdseye){
        ShowBirdseyeControl(true);
    } else {
        ShowBirdseyeControl(false);
    }
    
}

function MapChanged()
{
    /*var controls = map.controls;
    while(controls.length>0){
        map.DeleteControl(controls[0]);
    }
    addControls(map);*/
    try{
        var mapStyle = map.GetMapStyle();
        
        if(mapStyle != VEMapStyle.Birdseye){
	        GetPointsForLocation();
	        //alert(map.GetZoomLevel());
	        if(Number(map.GetZoomLevel()) > 14){
	            controlPhoto.onclick = function(){
	                var s=map.GetMapStyle();
	                ShowBirdseyeControl(true);
	                map.SetMapStyle(VEMapStyle.Birdseye);
	            };
	            controlPhoto.onmouseover = function(){
	                MM_swapImage('PhotoButton','','/beijing/images/map/viewbutton-photo_roll.png',1);
	            };
	            controlPhoto.src = "/beijing/images/map/viewbutton-photo_normal.png";
	            controlPhoto.onmouseout = function(){
	                MM_swapImgRestore();
	            };
	        } else {
	            controlPhoto.src= "/beijing/images/map/viewbutton-photo_disabled.png";
	            controlPhoto.onclick = function(){
	            };
	            controlPhoto.onmouseover = function(){
	            };
	            controlPhoto.onmouseout = function(){
	            };
	        }
	    }
    }catch(e){
        
    }
}

function GetPointsForLocation()
{
    try{
	if (map != null)
	{
		map.Clear();
		
		var view = map.GetMapView();
        var ne = view.TopLeftLatLong;
        var sw = view.BottomRightLatLong;

		var ms = new MapServices();
		//alert(ne.Latitude);
		var vids = ms.GetVideosByLocation(sw.Latitude, ne.Longitude, ne.Latitude, sw.Longitude , categories,3);
		var x = vids.length;
		//var vid = vids[0];
		
		var tbl = document.getElementById("VideoList");
		while (tbl.childNodes.length > 0)
		{	
		    tbl.removeChild(tbl.firstChild);
		}
		var tbody = document.createElement("tbody");
		tbl.appendChild(tbody);
		
		var j;
		for (j=0; j<x; j++)
		{
			var vid = vids[j];
			addVideoPoint(map, vid.latitude, vid.longitude, j+1, vid.title, vid.description, vid.url, vid.videoUri);
			
			AppendVideoToList(vid, tbody, j+1);
		}
		var temporalJScrollContent = document.getElementById("temporalJScrollContent");
		if (BrowserDetect.browser == 'Explorer'){
		    if(temporalJScrollContent){
		        temporalJScrollContent.style.display = 'none';
		    }
		    $(function()
	        {
		        $('#contentRight2').jScrollPane({showArrows:true, scrollbarWidth: 16, arrowSize: 15});
	        });
	    } else if (BrowserDetect.browser == 'Firefox'){
	    if(temporalJScrollContent){
		        temporalJScrollContent.style.height = '60px';
		    }
		    $(function()
	        {
		        $('#contentRight2').jScrollPane({showArrows:true, scrollbarWidth: 16, arrowSize: 15});
	        });
	    } else {
	        temporalJScrollContent.style.display = 'none';
	    }
	}
	}catch(e){
	    //alert(e.message)
	}
}


/*
function GetPointsForLocation()
{
	if (map != null)
	{
		map.clearOverlays()

		var bounds = map.getBounds();
		var ne = bounds.getNorthEast();
		var sw = bounds.getSouthWest();
		
		var ms = new MapServices();

		var vids = ms.GetVideosByLocation(sw.lat(), sw.lng(), ne.lat(), ne.lng(), categories);
		var x = vids.length;
		//var vid = vids[0];
		
		var tbl = document.getElementById("VideoList");
		while (tbl.childNodes.length > 0)
		{	
		    tbl.removeChild(tbl.firstChild);
		}
		var tbody = document.createElement("tbody");
		tbl.appendChild(tbody);
		
		var j;
		for (j=0; j<x; j++)
		{
			var vid = vids[j];
			addVideoPoint(vid.latitude, vid.longitude, j+1, vid.title, vid.description, "");
			
			AppendVideoToList(vid, tbody, j+1);
		}
	}
}
*/
function ChangeImageNumber(obj, over, index){
    if(over){
        obj.firstChild.firstChild.src = "/beijing/images/numbers/grey"+index+".png";
    } else {
        obj.firstChild.firstChild.src = "/beijing/images/numbers/white"+index+".png";
    }
}

function AppendVideoToList(videoinfo, tableobject, index)
{
	//var tbody = document.createElement("tbody");
	//tableobject.appendChild(tbody);
	var tr = document.createElement("tr");
	tr.onmouseover = new Function("ChangeImageNumber(this, true, "+index+");");
	tr.onmouseout = new Function("ChangeImageNumber(this, false, "+index+");");
	
	var td1 = document.createElement("td");
    td1.setAttribute("vAlign", "top");

	var img = document.createElement("img");
	img.setAttribute("src", "/beijing/images/numbers/white" + index + ".png");
	img.style.paddingLeft="5px";
	td1.appendChild(img);
	
	var td2 = document.createElement("td");
	td2.setAttribute("width", "100%");
	//td2.innerHTML = videoinfo.title;
	
	var link = document.createElement("a");
	link.setAttribute("href", "/beijing/videoPage/PlayVideo.aspx?id=" + videoinfo.url);
	link.innerHTML = videoinfo.title;
    td2.appendChild(link);

	tr.appendChild(td1);
	tr.appendChild(td2);
	
	
	tableobject.appendChild(tr);
	
	//tableobject.appendChild(tr);
}

function TubeStationClick(value)
{
	var latlng = value.split(",");
	var lat = Number(latlng[0]);
	var lng = Number(latlng[1]);
	
	map.SetCenterAndZoom(new VELatLong(lat, lng), 16);
	GetPointsForLocation();
}

function AreaClick(value)
{
	var latlng = value.split(",");
	var lat = Number(latlng[0]);
	var lng = Number(latlng[1]);
	var zoom = Number(latlng[2]);
	
	map.SetCenterAndZoom(new VELatLong(lat, lng), zoom);
	GetPointsForLocation();
}

function VideosCallback(vids)
{

}

function zoomToPostCode(){
    var postCode = document.getElementById("postCodeSearch");
    var obj = getLongitudeLatitudeByPostCode(postCode.value);
    if (obj.latitude==0 || obj.longitude==0){
        alert("The post code you entered was not reconised.");
    }else{
        if (obj.latitude <= latitudeTop && obj.longitude >=longitudeTop && obj.latitude>=latitudeBotton && obj.longitude<=longitudeBotton){
            map.SetCenterAndZoom(new VELatLong(obj.latitude, obj.longitude), 16);
	        GetPointsForLocation();
	    }else{
	        alert("The post code you entered was not recognised")
	    }
	}
	
}

function showAllOfBeijing(){
    map.SetCenterAndZoom(new VELatLong(39.915925, 116.399202), 11);
}


function addControls(map){
    /* zoom-in control*/
    control = document.createElement("img");
	control.id = "ZoomInButton";
	control.style.top ="10px";
	control.style.left = "10px";
	control.style.border = "0px";
	control.src = "/beijing/images/map/zoom-in_normal.png";
	
	
	control.onclick = function(){
	    map.ZoomIn();
	};
	
	control.onmouseover = function(){
	    MM_swapImage('ZoomInButton','','/beijing/images/map/zoom-in_roll.png',1);
	};
	control.onmouseout = function(){
	    MM_swapImgRestore();
	};
	map.AddControl(control);
	/* zoom-out control*/
	control = document.createElement("img");
	control.id = "ZoomOutButton";
	control.style.top ="35px";
	control.style.left = "10px";
	control.style.border = "0px";
	control.onclick = function(){
	    map.ZoomOut();
	};
	control.onmouseover = function(){
	    MM_swapImage('ZoomOutButton','','/beijing/images/map/zoom-out_roll.png',1);
	};
	control.onmouseout = function(){
	    MM_swapImgRestore();
	};
	control.src = "/beijing/images/map/zoom-out_normal.png";
	map.AddControl(control);
	/*rotate-right control*/
	control = document.createElement("img");
	control.id = "RotateRightButton";
	control.style.top ="60px";
	control.style.left = "10px";
	control.style.border = "0px";
	control.style.display = "none";
	control.src = "/beijing/images/map/rotate-right_normal.png";
	control.onmouseover = function(){
	    MM_swapImage('RotateRightButton','','/beijing/images/map/rotate-right_roll.png',1);
	};
	control.onmouseout = function(){
	    MM_swapImgRestore();
	};
	control.onclick = function(){
	    orientationMap++;
        if (orientationMap>4)
            orientationMap = 1	    
	    SetBirdseyeOrientation();
	};
	
	map.AddControl(control);
	/*rotate-left control*/
	control = document.createElement("img");
	control.id = "RotateLeftButton";
	control.style.top ="85px";
	control.style.left = "10px";
	control.style.border = "0px";
	control.style.display = "none";
	control.src = "/beijing/images/map/rotate-left_normal.png";
	control.onmouseover = function(){
	    MM_swapImage('RotateLeftButton','','/beijing/images/map/rotate-left_roll.png',1);
	};
	control.onmouseout = function(){
	    MM_swapImgRestore();
	};
	control.onclick = function(){
	    orientationMap--;
        if (orientationMap<1)
            orientationMap = 4	    
	    SetBirdseyeOrientation();
	};
	
	map.AddControl(control);
	/*Photo control*/
	/*var controlP = document.createElement("img");
	controlP.id = "PhotoButton";
	controlP.style.top ="10px";
	controlP.style.left = "410px";
	controlP.style.border = "0px";
	controlP.onmouseover = function(){
	};
	controlP.onmouseout = function(){
	};
	controlP.onclick = function(){
	};
	controlP.src = "/beijing/images/map/viewbutton-photo_disabled.png";
	controlPhoto = controlP;
	map.AddControl(controlP);
	
	if(Number(map.GetZoomLevel()) > 14){
        controlPhoto.onclick = function(){
            var s=map.GetMapStyle();
            ShowBirdseyeControl(true);
            map.SetMapStyle(VEMapStyle.Birdseye);
        };
        controlPhoto.onmouseover = function(){
            MM_swapImage('PhotoButton','','/beijing/images/map/viewbutton-photo_roll.png',1);
        };
        controlPhoto.src = "/beijing/images/map/viewbutton-photo_normal.png";
        controlPhoto.onmouseout = function(){
            MM_swapImgRestore();
        };
    } else {
        controlPhoto.src= "/beijing/images/map/viewbutton-photo_disabled.png";
        controlPhoto.onclick = function(){
        };
        controlPhoto.onmouseover = function(){
        };
        controlPhoto.onmouseout = function(){
        };
    }*/
	
	/*Map control*/
	control = document.createElement("img");
	control.id = "MapButton";
	control.style.top ="10px";
	control.style.left = "410px";
	control.style.border = "0px";
	control.style.display = "none";
	control.src = "/beijing/images/map/viewbutton-map_normal.png";
	control.onmouseover = function(){
	    MM_swapImage('MapButton','','/beijing/images/map/viewbutton-map_roll.png',1);
	};
	control.onmouseout = function(){
	    MM_swapImgRestore();
	};
	control.onclick = function(){
	    var s=map.GetMapStyle();
	    ShowBirdseyeControl(false);
	    map.SetMapStyle(VEMapStyle.Road);
	    
	};
	map.AddControl(control);
}
var orientationMap = 1;
function SetBirdseyeOrientation()
{
    switch(orientationMap)
    {
       case 1: map.SetBirdseyeOrientation(VEOrientation.North);
                     break;
       case 2: map.SetBirdseyeOrientation(VEOrientation.South);
                     break;
       case 3: map.SetBirdseyeOrientation(VEOrientation.East);
                     break;
       case 4: map.SetBirdseyeOrientation(VEOrientation.West);
                     break;
    }
}
         
         
function ShowBirdseyeControl(show){
    if (show){
        document.getElementById("RotateLeftButton").style.display="";
        document.getElementById("RotateRightButton").style.display="";
        document.getElementById("MapButton").style.display="";        
    }else{
        document.getElementById("RotateLeftButton").style.display="none";
        document.getElementById("RotateRightButton").style.display="none";    
        document.getElementById("MapButton").style.display="none";      
    }
}