﻿// JScript File for AssetMap.aspx

    var map;
    var tooltip=document.createElement("div");tooltip.style.visibility="hidden";
    var rpanelBox;
    var globalCount=1;
    var table=null;
    var cmarkers = [];
    var hmarkers = [];
    var htmls = [];
    var clientIds = [];
    var cache=false;
    var req;

    function load(a,b,c) {

        rpanelBox = document.getElementById("real_box");
        if (GBrowserIsCompatible()) {
            var mapobj=document.getElementById("map");
            map=new GMap2(mapobj);mapobj.appendChild(tooltip);
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl());
            map.enableContinuousZoom();
            map.enableDoubleClickZoom();
            map.setCenter(new GLatLng(a, b), c);
            ClientSideFunction();
            
            GEvent.addListener(map,'moveend',function(){
                if(globalCount){
                    var bounds=map.getBounds();
                    var southWest=bounds.getSouthWest();
                    var northEast=bounds.getNorthEast();
                    GD(southWest,northEast);
                    globalCount=0;
                    
                }else{
                    globalCount=1;
                }
            });
        }
    }
    
        
    function ClientSideFunction(){var b=map.getBounds(),s=b.getSouthWest(),n=b.getNorthEast();GD(s,n);}
    
    function ClientSideFunction1(a,b,c){map.setCenter(new GLatLng(a, b), c);cache=true;}
    
    function GD(s,n) {

        var tempsc = sc(); 
            if(tempsc=="nothing"){
                map.clearOverlays();
                rpanelBox.innerHTML = "<div style='padding:3px'>no category is selected</div>";
            }else{
                rpanelBox.scrollTop = 0;
                $('#map').block("<img src='"+serverURL+"images/loadingAnimation.gif' border=0 />");
                
                var a = serverURL + 'SaveAnything/AssetMapRes.aspx?slng='+s.lng()+'&slat='+s.lat()+'&nlng='+n.lng()+'&nlat='+n.lat()+'&sc='+sc();
                $.getJSON(a, function(data){
                                globalCount=1;
                                table = data;
                                rpanelBox.innerHTML = "";
                                map.clearOverlays();
                                if(data==""){
                                    alert("unexpected error");
                                }else{
                                    csf3();
                                }
                            }   
                );
            }
        }
    
    function sc() {var returnval="";for(var i=0; i < 8; i++) { if (document.getElementById(jsGetSelectedCategory+"_"+i).checked==true) returnval= returnval + i + ","; }if(returnval==""){return "nothing";}else{return returnval;}}
    
    function zoomout(){var z=map.getZoom();if(z > 15){map.setZoom(z-1);}}
    
    G_SATELLITE_MAP.getErrorMessage = function() {zoomout();return "";}
    G_NORMAL_MAP.getErrorMessage = function() {map.setMapType(G_SATELLITE_MAP);return "";}
    G_HYBRID_MAP.getErrorMessage = function() {zoomout();return "";}
    
    function csf3() {

            var markercount = 0;var count = table.Rows.length;var temprpanel = "";  
            
	        for (var i = 0; i < count; i++) {
                        
			            var row = table.Rows[i];var storyid = row[1];
                        
                        if(	row[10] == 1 ) {   
                        
    		                    var clientId = getClientIds(storyid);
			                    var c = clientId.split(",");
			                    var point = new GPoint((parseFloat(row[3])),(parseFloat(row[2])));
			                    var category = row[4];
			                    var categoryname = row[13];
			                    var cityname = row[8];
			                    var zoomlevel = row[12];
			                    var geographicAreaId = row[11];
			                    var communityURL = row[14];
            			        
                                var icon = new GIcon();
                                icon.image = serverURL + "SaveAnything/images/" + row[20];
                                icon.iconSize = new GSize(row[21], row[22]);
                                icon.iconAnchor = new GPoint(row[23], row[24]);
                                icon.infoWindowAnchor = new GPoint(row[25], row[26]);	
                                
                                var icon_hot = new GIcon();
                                icon_hot.image = serverURL + "SaveAnything/images/" + row[15];
                                icon_hot.iconSize = new GSize(row[16], row[17]);
                                icon_hot.iconAnchor = new GPoint(row[18], row[19]);

                                var marker = createMarker(point,icon,icon_hot,getBubbleHTML(storyid,point,cityname,geographicAreaId,zoomlevel,communityURL),cityname,categoryname,clientId,markercount,storyid);
                                map.addOverlay(marker);
                                markercount++;
                        }

                            
                        temprpanel += "<div id='"+ row[0] + "' style='padding:2px;border-bottom:solid 1px black;cursor:pointer' onclick='mc(this)' onmouseover='mo(this," + row[4] + ")' onmouseout='mu(this)'><span style='color:red;font-weight:bold'><img src='" + serverURL + "SaveAnything/images/"
                        + getLegendImg(row[4]) + ".png' border=0 />&nbsp;" + row[5]  + " - <font color='black'>" + row[32] + "</font></span><br/>" + row[28] + "<br />Ratings: <font color='orange'>Im</font>:" + row[29] + " <font color='orange'>In</font>:" + row[30] + " <font color='orange'>Qu</font>:" + row[31] + "</div>";
			            }
			            
			            rpanelBox.innerHTML = temprpanel + "<div style='height:200px'></div>";
			            $('#map').unblock();
                     
    }
    
    function getLegendImg(a)
    {
        switch (a){
        case "1":
            return "animal"; 
        break;
        case "2":
            return "community"; 
        break;
        case "3":
            return "crisis"; 
        break;
        case "4":
            return "environment"; 
        break;
        case "5":
            return "social"; 
        break;
        case "6":
            return "poverty"; 
        break;
        case "7":
            return "health"; 
        break;
        case "8":
            return "education"; 
        break;
        default:return "animal"; 
        }
    }

    function getBubbleHTML(storyid,point,cityname,geographicAreaId,zoomlevel,communityURL) {

        var nametag="",prj="",story="",all="",pend="",storyLnk="";
        var count=0,ptag=0,stag=0,dtag=0,ccount=0;
        var tabs = [];

        for (var i = 0; i < table.Rows.length; i++) {
            
            var row = table.Rows[i];
            var storyId = row[1];
            var storyIdComp = row[9];
            var strType = row[5];

            var strhtml = "<a href='" + row[7] + "' class='assetLink'>" + row[28] + "</a><div style='padding-bottom:3px;padding-top:3px;border-bottom:dashed 1px #000;'>" + row[6];
            if(row[27]=="False") strhtml = strhtml + " <a href='" + row[7] + "' class='assetLink'  style='color: rgb(220, 104, 29);'>read more</a>";
            strhtml = strhtml + "</div>";

            if(storyid == storyIdComp) {
                
                all += strhtml;
                
                switch(strType)
                {
                    case "Story":
                      story += strhtml; 
                      stag=1;ccount += 1;
                      break;    
                    case "Project":
                      prj += strhtml;
                      ptag=1;ccount += 1;
                      break;
                    case "Proposal":
                      pend += strhtml;
                      dtag=1;ccount += 1;
                      break;
                }
                
                storyLnk = row[7];
            }
            
        }

        if(ccount>1) storyLnk = serverURL + "Community" + communityURL;
        
        var buttonstr = "<div style='font-weight:bold;color:red'>Location : " + cityname + "</div>" + "<a href='javascript:void(0)' onclick='zoomtoArea(" + geographicAreaId + "," + point.y + "," + point.x + 
                        "," + zoomlevel + ")'><img alt='Zoom' src='" + serverURL + "SaveAnything/images/saZoomBtn.gif' style='border:none;float:right' /></a>" +
                        "<a href='" + storyLnk + "')><img alt='GoTo' src='" + serverURL + "SaveAnything/images/saGoTo.gif' style='border:none;' /></a>";
                        
        count = stag+ptag+dtag;
        
        if(count>1){
        
            all= '<div style="width:'+(count+1)*85+'px;margin-right:'+(count+1)*4+'px;height:100px;overflow:auto;">' + all + '</div>' + buttonstr;tabs.push(new GInfoWindowTab("All",all));
            if(stag)tabs.push(new GInfoWindowTab("Story",'<div style="width:'+(count+1)*85+'px;margin-right:'+(count+1)*4+'px;height:100px;overflow:auto;">' + story + "</div>" + buttonstr));
            if(ptag)tabs.push(new GInfoWindowTab("Project",'<div style="width:'+(count+1)*85+'px;margin-right:'+(count+1)*4+'px;height:100px;overflow:auto;">' + prj + "</div>" + buttonstr));
            if(dtag)tabs.push(new GInfoWindowTab("Proposal",'<div style="width:'+(count+1)*85+'px;margin-right:'+(count+1)*4+'px;height:100px;overflow:auto;">' + pend + "</div>" + buttonstr));           
            
        }
        
        else{
        
            if(stag)nametag="Story";
            if(ptag)nametag="Project";
            if(dtag)nametag="Proposal";
            tabs.push(new GInfoWindowTab(nametag,"<span style='color:red'>"+nametag+"</span><div class='comicbubble'>" + all + "</div>" + buttonstr));
            
        }
       
        return tabs;
    
    }
    
    function getClientIds(storyid) 
    {
        var result="";count=0;
        
        for (var i = 0; i < table.Rows.length; i++) {
        
            var row = table.Rows[i];
            
            if(storyid == row[9]) {
            
                if(count==0)
                    result = row[0];
                else
                    result = result + "," + row[0];
                    
                count= count+1;
                
                }
        }
        
        return result;    
    }

    function zoomtoArea(i,lat,lng,zoomlevel) {
                
	            var z=map.getZoom();document.getElementById(jsGeographicAreaId).value = i;
                if(zoomlevel>z){map.setCenter(new GLatLng(parseFloat(lat), parseFloat(lng)), zoomlevel);AnthemInvokezoomtoArea(i);}
                else{map.setZoom(map.getZoom() + 1);AnthemInvokezoomtoArea(i);}

    }

    function AnthemInvokezoomtoArea(i) {Anthem_InvokePageMethod('ZoomToArea',[i],function () { }); }

    function createMarker(point,icon,icon_hot,htmltext,cityname,category,clientId,i,storyid) {
        var marker = new GMarker(point,icon);

        GEvent.addListener(marker, 'click', function() {markerclick(i,htmltext,storyid);});
        GEvent.addListener(marker, 'mouseover', function() {onmarker(clientId);});
        GEvent.addListener(marker, 'mouseout', function() {outmarker(clientId);});

        cmarkers[i] = marker;
        cmarkers[i].tooltip = '<div class="pinTooltip">'+cityname+':'+category+'</div>';
        hmarkers[i] = new GMarker(point,icon_hot);
        hmarkers[i].tooltip = '<div class="pinTooltip">'+cityname+':'+category+'</div>';
        clientIds[i] = clientId;
        htmls[i] = htmltext;
        return marker;
    }
        		
    function getifromclientId(clientId) {
    
        for(var i=0; i<clientIds.length; i++)
        {

            var c = clientIds[i].split(",")
            
            if(c.length>1) {
        
                for(var j=0; j < c.length; j++)
                {
                    if(c[j] == clientId) {
                    
                            return i;
                    }
                
                }    
            
            }
            
            else {
                
                if(clientIds[i] == clientId) { return i; }
            }
        }   
    }
	
    function mc(elm,type) {
    
        globalCount = 0;
        var i =  getifromclientId(elm.id);var tabid = 0;   
        tooltip.style.visibility="hidden";
        cmarkers[i].openInfoWindowTabsHtml(htmls[i],{maxWidth:250,selectedTab:tabid});
    }
    
    function markerclick(i,htmltext,storyid) {
        globalCount = 0;
        tooltip.style.visibility="hidden";
        cmarkers[i].openInfoWindowTabsHtml(htmltext,{maxWidth:250,selectedTab:0});
    }
    
    function mo(elm, categoryId)
    { 

        elm.style.color = "white";elm.style.backgroundColor = "#778899";
        var i =  getifromclientId(elm.id);
 
        try { map.removeOverlay(cmarkers[i]); } catch (e) {alert(e);}
        try { map.addOverlay(hmarkers[i]); } catch (e) {alert(e);}
        
        showTooltip(hmarkers[i], categoryId);

      
    }
    
    function mu(elm)
    { 
        elm.style.backgroundColor = "white";elm.style.color = "black";var i =  getifromclientId(elm.id);    
                
            try { map.removeOverlay(hmarkers[i]); } catch (e) {alert(e);}
            try {
            var tMarker = new GMarker(cmarkers[i].getPoint(), cmarkers[i].getIcon());
            GEvent.addListener(tMarker, 'mouseover', function() {onmarker(clientIds[i]);});
            GEvent.addListener(tMarker, 'mouseout', function() {outmarker(clientIds[i]);});
            GEvent.addListener(tMarker, 'click', function() {markerclick(i,htmls[i]);});
            cmarkers[i] = tMarker;map.addOverlay(cmarkers[i]);} catch (e) {alert(e);}
            tooltip.style.visibility="hidden";
    }
    
    function onmarker(clientId)
    {
        var c = clientId.split(",");var d = "";

        if(c.length>1) {
        
            for(var i=0; i<c.length; i++)
            {
                var element = document.getElementById(c[i]);
                if(element){
                element.style.backgroundColor = "#778899";element.style.color = "white";
                if(i==0){rpanelBox.scrollTop = element.offsetTop-rpanelBox.offsetTop;}
                }
            }    
        
        }
        
        else {
            
            var element = document.getElementById(clientId);
            if(element){element.style.backgroundColor = "#778899";element.style.color = "white";rpanelBox.scrollTop = element.offsetTop-rpanelBox.offsetTop;}
        }
    }
  
    function outmarker(clientId)
    {
        var c = clientId.split(",");


        if(c.length>1) {
        
            for(var i=0; i<c.length; i++) {
            
                var element = document.getElementById(c[i]);
                if(element){element.style.backgroundColor = "white";element.style.color = "black";}
            }    
        
        }
        
        else {
            
            var element = document.getElementById(clientId);
            if(element){element.style.backgroundColor = "white";element.style.color = "black";}
        }

    }
    
    function showTooltip(marker, categoryId) {
        var markerPoint = marker.getPoint();
        var mapBounds = map.getBounds()
        tooltip.innerHTML = marker.tooltip;

	    var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(mapBounds.getSouthWest(),map.getZoom());
	    var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(markerPoint,map.getZoom());
	    var anchor=marker.getIcon().iconAnchor;
        var width=marker.getIcon().iconSize.width;   
        var height=marker.getIcon().iconSize.height;  
                  
        switch (categoryId){
        case 1:
            width=width-40;
            height=height-20; 
        break;
        case 2:
             width=width-20;
             height=height-40; 
        break;
        case 3:
             height=height-60; 
        break;
        case 4:
             height=height-40; 
        break;
        case 5:
             height=height-20; 
        break;
        case 6:
             height=parseInt(height)+25;
        break;
        case 7:
             height=parseInt(height)+25;
        break;
        case 8:
             width=width-20;
             height=parseInt(height)+25;
        break;
        default :;
        }
        
	    var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(parseInt(offset.x) - parseInt(point.x) - parseInt(anchor.x) + parseInt(width), - parseInt(offset.y) + parseInt(point.y) + parseInt(anchor.y) - parseInt(height))); 
	    pos.apply(tooltip);
	    tooltip.style.visibility="visible";
    }
  





