// *************** beginning of Query object definition and methods *************************
// ******************************************************************************************


// this defines the query object
function queryObj(catGroup, latlonLimit, cat, age, date, dateMin, dateMax, datePost, keyword)
{
    this.catGroup = catGroup
    this.latlonLimit = latlonLimit   //a array of 4 elements: latmax, latmin, lonmax, lonmin in this order
    this.cat = cat          //array of categories
    this.age = age          //number
    this.date = date
    this.dateMin = dateMin
    this.dateMax = dateMax
    this.datePost = datePost
    this.keyword = keyword
    
    this.build = build
    this.createQueryString = createQueryString
} 

function build()        // retrieves user's query choices and builds a query object
{
    this.catGroup = 20 //getAccordionIndex()    // see find.js for getAccordionIndex function definition
    //this.catGroup = this.catGroup.toString() + "0"  //converting accordion index into the catgroupID
    //this.catGroup = (+this.catGroup) + 10              //converting accordion index into the catgroupID (the '+' in front of catgroup converts it from a string to a number)
    this.cat = getCheckBoxes("cb"+this.catGroup,"")       // "cb" is the root name of the categories check boxes
    this.age = getAge()
    
    if ($("findLocalRequestRadio").checked)
    {var arr = new Array(4); this.latlonLimit = getMapLimit()} else {var arr = new Array(); this.latlonLimit = arr }  //returning an empty array if the request is worldwide (ie don't need to calculate map limits)
    
    if (this.catGroup == 10) {
        this.date = Date.parseString($("dateInputFind1").value, "M/d/y")
        this.dateMin = Date.parseString($("dateInputFind2").value, "M/d/y")
        this.dateMax = Date.parseString($("dateInputFind3").value, "M/d/y")
        if (this.date == null) //since we can't pass a null date to asp.net, I'm using a date set to "1900" as a null replacement
        {
            this.date = new Date(); //returns today's date and time
            this.date.setFullYear("1900")
        } 
        if (this.dateMin == null)  //by default range starts at today's date
        {
            this.dateMin = new Date();
            this.dateMin.setDate(this.dateMin.getDate() - 1);  //I have to start the range at yesterday's date to get today's event included. Ex: today's event is stored as 8/4/07 00.00.00, today's date would be 8/4/07 14:23:45 which is higher than previous value and would not show
        }
        if (this.dateMax == null) //by default range upper limit is one year out
        {
            this.dateMax = new Date();
            this.dateMax.setFullYear(this.dateMax.getFullYear() + 1); 
        }  
    }else{
        this.date = new Date();   //returns today's date and time. This date value will not be used, it just needs to be non null to get passed successfully to asp.net
        this.dateMin = new Date();
        this.dateMax = new Date();
    }

}


 // this creates a query string according to the tables designed in the sql database. pref is the category group prefix
function createQueryString()
{
    var CG = convertToCG(this.catGroup)  //Convert a numeral (ex:20) into a 2 letter code (ex:PG)
/*            
    var qstring = "SELECT "+CG+"location.mapID, "+CG+"location.lat, "+CG+"location.lon "
    qstring += "FROM "+CG+"location "
    qstring += "WHERE ("+CG+"location.lat <= "+this.latlonLimit[0]+ ") AND ("+CG+"location.lat >= "+this.latlonLimit[1]+ ")" 
    qstring += " AND ("+CG+"location.lon <= "+this.latlonLimit[2]+") AND ("+CG+"location.lon >= "+this.latlonLimit[3]+")"
*/
    var qstring = "SELECT PRposts.mapID, PRposts.title, PRposts.description, PRposts.createdOn, PRposts.ratingTotal, PRposts.ratingCount, "
    qstring += "mbrProfile.memberID, mbrProfile.lat, mbrProfile.lon, mbrProfile.primaryPic, mbrProfile.display "
    qstring += "FROM PRPosts INNER JOIN (PRpostRef INNER JOIN mbrProfile ON PRpostRef.memberID = mbrProfile.memberID) ON PRPosts.mapID = PRPostRef.mapID"
    
    if ($("findLocalRequestRadio").checked)
    {
        qstring += " WHERE (mbrProfile.lat <= "+this.latlonLimit[0]+ ") AND (mbrProfile.lat >= "+this.latlonLimit[1]+ ")" 
        qstring += " AND (mbrProfile.lon <= "+this.latlonLimit[2]+") AND (mbrProfile.lon >= "+this.latlonLimit[3]+")"
    }
    if ((this.cat.length > 0) && (this.catGroup != 100))   //catGroup = 100 means user selected all prayer requests
    {
        qstring += " AND EXISTS (SELECT NULL FROM "+CG+"category WHERE ("+CG+"postRef.mapID = mapID) AND (catID = "+this.cat[0]  //changed location.mapID to postRef.mapID
        for (i=1; i < this.cat.length; i++)
        {
            qstring += " OR catID = "+this.cat[i]
        }
        qstring += "))"
    }

    if (this.age != 100)    //100 is the value of the 'all ages' option 
    {
        qstring += " AND EXISTS (SELECT NULL FROM "+CG+"age WHERE ("+CG+"location.mapID = mapID) AND (ageID = "+this.age+"))"
    }     

    if (CG == "EV"){
        if (this.date.getFullYear() != "1900"){
            qstring += " AND (EXISTS (SELECT NULL FROM "+CG+"dateExact WHERE ("+CG+"location.mapID = mapID) AND (date = @date))"
                 qstring += " OR EXISTS (SELECT NULL FROM "+CG+"dateRange WHERE ("+CG+"location.mapID = mapID) AND (dateMin <= @date) AND (dateMax >= @date)))"
        }else{
            qstring += " AND (EXISTS (SELECT NULL FROM "+CG+"dateExact WHERE ("+CG+"location.mapID = mapID) AND (date >= @dateMin) AND (date <= @dateMax))"
                 qstring += " OR EXISTS (SELECT NULL FROM "+CG+"dateRange WHERE ("+CG+"location.mapID = mapID) AND (dateMin <= @dateMax) AND (dateMax >= @dateMin)))"
        }
    }
    
    qstring += " ORDER BY PRposts.createdOn DESC;"

    return qstring

}  

 function getCheckBoxes(cbName, idPrefix)             //find all the cb elements with the name cbName and return their id string without prefix
 {
     var checkBoxes = new Array();         
     var arr = document.getElementsByName(cbName)
     
     var p = idPrefix.length   //number of chars to slice from the idPrefix string
     
     for (i=0; i<arr.length; i++)
     {
         if (arr[i].checked==true)
         {
            checkBoxes.push(arr[i].id.slice(p))
         }
      }  
     return checkBoxes
 }  
    
 function getAge()
 {
    var index = $("ageList").selectedIndex   
    var ageSelected = $("ageList").options[index].value
    return ageSelected
 }
 
 
 function getMapLimit()
 {    
    var TopLeftLatLong = new VELatLong()
    var BottomRightLatLong = new VELatLong()
    var TopRightLatLong = new VELatLong()
    var BottomLeftLatLong = new VELatLong()
    
    var rectangle = new VELatLongRectangle(TopLeftLatLong, BottomRightLatLong, TopRightLatLong, BottomLeftLatLong)
    
    //this works around the bug in VE where if map width/height are set in percentage, the BottomLeftLatLong returned is incorrect. 
    //so we set the map dimensions to the container div dimensions and when we're done, we reset the map dimensions to percentage
    //so browser resizing still flows per design
    var mWidth = $("ctner").offsetWidth
    var mHeight = $("ctner").offsetHeight
    //$("divResponse").innerHTML="offsetHeight: "+mHeight+", offsetWidth: "+mWidth
    $("myVEMap").style.width = mWidth
    $("myVEMap").style.height = mHeight
    
    rectangle = map.GetMapView()
   
    var arr = new Array(); 
    arr[0] = rectangle.TopLeftLatLong.Latitude
    arr[1] = rectangle.BottomRightLatLong.Latitude        
    arr[2] = rectangle.BottomRightLatLong.Longitude        
    arr[3] = rectangle.TopLeftLatLong.Longitude      
    
    $("myVEMap").style.width = "100%"
    $("myVEMap").style.height = "100%"  
    
    return arr
 }
 
 

// Contains Find UI functions 



// *************** beginning of Accordion UI element functions **************************
// **************************************************************************************

function fillAccordion()
{
    //this function will fill each accordion pane with their respective category checkboxes
    //it assumes that we already have in the UI a number of Accordion panes that match the CatGroup items in the database.
    //it uses two arrays, CatDesc and CatID that are dynamically created and sent on by the server on page load
    var mycheckbox;
    var mycheckboxname; //category group name of the check box so I can later retrieve them according to selected group (accordion)
    var myspan;
    var mycbtext;
    var spanid;
    var lb;
    var mydiv
    var str
    previousCBid = ""; //id of previous "all" check box (we compare against this so we don't create a node for every catID, but only every catGroup)
/*    
    for (i in CatID) //this for is modeled after the one right below but it only ads one "all" check box per catgroup
    {
        allCBid = "allCB"+CatID[i].toString().charAt(0)+"0"
        if ((allCBid != previousCBid) & (!$(allCBid)))
        {
            //mycheckbox = document.createElement("<a id="+allCBid+" name='check' href='#' class='UIText' onclick='selectAllCB(this.id)'>")  Firefox doesn't like this html declaration
            //mycheckbox = document.createElement("a")
            mycheckbox = createElementWithName("a", "check")
            mycheckbox.id = allCBid
            //mycheckbox.name = "check"
            mycheckbox.href = "#"
            mycheckbox.className = "link"
            mycheckbox.onclick = function(){selectAllCB(this.id);}
                        
                        
            mycbtext = document.createTextNode("check all");
            lb = document.createElement("br");
            str = "accordion"+CatID[i].toString().charAt(0)+"0"
            mydiv = $(str);
            
            mydiv.appendChild(mycheckbox);      
            mycheckbox.appendChild(mycbtext);
            mydiv.appendChild(lb);
            previousCBid = allCBid
         }
 */
    /*
        allCBid = "allCB"+CatID[i].toString().charAt(0)+"0"
        if (allCBid != previousCBid)
        {
            mycheckbox = document.createElement("<input id="+allCBid+" type='checkbox' onclick='selectAllCB(this.id)'>")
            spanid = "span"+allCBid;
            myspan = document.createElement("<span id='"+spanid+"' class=''>")
            mycbtext = document.createTextNode("All");
            lb = document.createElement("br");
            str = "accordion"+CatID[i].toString().charAt(0)+"0"
            mydiv = $(str);
            
            mydiv.appendChild(mycheckbox);
            mydiv.appendChild(myspan);        
            myspan.appendChild(mycbtext);
            mydiv.appendChild(lb);
            previousCBid = allCBid
         }
         */
 /*   }  */ 
    for (i in CatID)
    {
        //each checkbox gets the category database id and category group name for future reference
        mycheckboxname = "cb"+CatID[i].toString().charAt(0)+"0"
        //mycheckbox = document.createElement("<input id="+CatID[i]+" name='"+mycheckboxname+"' type='checkbox'>")   Firefox doesn't like this html declaration
        //mycheckbox = document.createElement("input")
        mycheckbox = createElementWithName("input", mycheckboxname)
        mycheckbox.id = CatID[i]
        //mycheckbox.name = mycheckboxname
        mycheckbox.type = "checkbox"
        
        //create a span so I can style checkbox text specifically 
        spanid = "span"+CatID[i];
        //myspan = document.createElement("<span id='"+spanid+"' class=''>")
        myspan = document.createElement("span")
        myspan.id = spanid
        
        //create checkbox text within the span
        mycbtext = document.createTextNode(CatDesc[i]);
        lb = document.createElement("br");
        //str is the id of the matching div (within accordion pane) for that category 
        str = "accordion"+CatID[i].toString().charAt(0)+"0"
        mydiv = $(str);
        
        mydiv.appendChild(mycheckbox);
        mydiv.appendChild(myspan);        
        myspan.appendChild(mycbtext);
        mydiv.appendChild(lb);
    }
}

function getAccordionIndex()
{
    arr = $("findAccordion").getElementsByTagName('input')
    for (i=0;i<arr.length;i++)
    {
        if ((arr[i].name == "findCGradio") && (arr[i].checked == true))
        {
            index = arr[i].id
            return (+index);   // "+" converts from string to number       
        }       
    } 
}

//this function is being triggered when an accordion pane is closed  - hdrDiv is the header div node
function accCloseTrigger(hdrDiv)
{ 
    //hdrDiv.getElementsByTagName('input')[0].checked = false;
    //hdrDiv.getElementsByTagName("a")[0].firstChild.nodeValue = "all prayer categories"
    hdrDiv.innerHTML = "all prayer categories";
    //clear all check boxes
    for (i in CatID)
    {
        $(CatID[i]).checked = false;    //Find check boxes have the id: CatId[i]
    }
    
    
}

//this function is being triggered when an accordion pane is opened -  - hdrDiv is the header div node
function accOpenTrigger(hdrDiv)
{
    //hdrDiv.getElementsByTagName('input')[0].checked = true;
    //hdrDiv.getElementsByTagName("a")[0].firstChild.nodeValue = "these prayer categories"
    hdrDiv.innerHTML = "these prayer categories";
    Nifty("div.header_highlight","top transparent");              //rounding top corners of active header background

}



function selectAllCB(CBid)
{
    CG = CBid.slice(5)
    arr = document.getElementsByName("cb"+CG)
    if ($(CBid).name == "check")
    {
        for (i=0;i<arr.length;i++)
        {
            arr[i].checked = true;
        }
        $(CBid).name = "clear"
        $(CBid).firstChild.nodeValue = "clear all"
    }
    else
    {
        for (i=0;i<arr.length;i++)
        {
            arr[i].checked = false;
        }  
        $(CBid).name = "check"
        $(CBid).firstChild.nodeValue = "check all"
   
    }

}

 
// ***************  **************************
// ***********************************************************************************

function find(type)   //same as the findLoc function (in ui.js) except that it also adds a pin on the map - type is either most recent:1, most prayed:2 or answered:3
{
    //check that address field is not empty
    
    map.DetachEvent("onchangeview", currentView)

    if (($("userLocTyped").checked == false) || ($("userLoc").value == ""))
    {
        if (($("findAllRequestRadio").checked == true) && (map.GetZoomLevel() != "4" ))  //if zoom level = 4, a pan happens which triggers the onchangeview event which sets the Search option to local instead of around the world.
        {
            var mapCenter = new VELatLong(38,-108);
            map.SetCenterAndZoom(mapCenter, 4)  //zoom used to be at 10     
        }
        dbFind(type);
    }
    else
    {
        map.Clear();
        clearMbrPane()
        //map.AttachEvent("onendzoom", findInView)           
        map.ShowDisambiguationDialog(false);
        //map.FindLocation($('userLoc').value, onFoundResults);
        map.Find(null,$('userLoc').value,null,null,null,null,null,null,false,null,onFoundResults);
    }
    userSearch = true;
}

    function onFoundResults(ShapeLayer,FindResult,Place,HasMore)     //in VE4: onFoundResults(e)
    {
        //I'm now just taking the first result returned by VE which is automatically defaulted (shown) on the map
        //map.AttachEvent("onendzoom", findInView2)
        //map.ZoomOut();  //I want to zoom one level out from the VE returned view, but
        dbFind();

    }

//these 2 functions below are for testing zooming out from default map view returned by the Find method: problem is automic Zoom In conflicts with my manual Zoom out, these functions do the trick but there is a back and forth zoom visual effect which is not great so not I'm not implementing it now    
function  findInView(e)   //I could've called dbFind directly but would've had to add logic to distinguish "type" from "e"
{  
        map.DetachEvent("onendzoom", findInView)  
        map.AttachEvent("onendzoom", findInView2)
        map.ZoomOut(); 
        //dbFind() 
        //return false;
} 

function  findInView2(e)   //I could've called dbFind directly but would've had to add logic to distinguish "type" from "e"
{  
        map.DetachEvent("onendzoom", findInView2)    
        dbFind() 
        //return false;
} 

function dbFind(type)
{        
        map.Clear()
        clearMbrPane()
        CustomHideInfoBox(_currentShape)
        
        //map.DetachEvent("onendpan", dbFind);
        
        var myQueryObj = new queryObj()
        
        myQueryObj.build()
        
        var myType
        if (!type) {
            var myTabber = $('tabberDivFind').tabber;
            if (myTabber.index) {myType=myTabber.index}  else{myType=0};         
        }
        else { myType = type }
        
        var requestBlockDiv = $("findRequests"+myType)
        requestBlockDiv.innerHTML = "<div class='loadingDiv'><img class='loadingImg' src='icons/progress_loading.gif'/>Searching...</div>"; //clears out previous prayer requests

        PageMethods.requestMapData(myQueryObj.catGroup, myQueryObj.cat, myType, myQueryObj.latlonLimit, myQueryObj.date, myQueryObj.dateMin, myQueryObj.dateMax, onMapResult, onMapError);
}
     
        function onMapResult(resultDataTable)              //callback function that processes the page method call return value.
        {
            var myTabber = $('tabberDivFind').tabber;
            var j = getTabberIndex(myTabber)         
            myTabber.tabShow(j)   //show the tab that was clicked            
            //fill the tab with requests results
            
            if (resultDataTable.rows)
            {
                //fill left pane with prayers
                createPrayerList(resultDataTable, "findRequests"+j) 
                //fill the map view with requests results     
                mapResults(resultDataTable) 
                //display prayer if request on load
                if (showPinpost)    //showPinpost is a global variable - if showing a pinpost such as prayer request was requested on load (thru the URL)
                {
                    var CGid = showPinpost[0]; 
                    var mapID = showPinpost[1]; 
                    //mbrID = showPinpost[2];                         
                    var CG = convertToCG(CGid)
                    //PageMethods.getMapItem(CG, mapID, onMapItemResult, onMapItemError); 

                    /*
                    if (mbrID)
                    {
                        if (myUser.memberID)  //case where an existing user is getting a playdate invite that doesn't belong to her
                        {
                            if (myUser.memberID != mbrID) 
                            {logOut("noPrompt")}          //we need to log her out first so there's no conflict with myUser.memberID
                        }       
                        myUser.memberID = mbrID;
                    }
                    */    
                    var CGmapID = CG + mapID 
                    var myShape = getShapeByLinkID(CGmapID);
                    displayInfoBox(myShape);
                    
                    var response = showPinpost[3]
                    if (response)  { doNothing() } // we're showing a new prayer response to someone who posted a request
                    else //we're showing a prayer invitation
                    {
                        msgBox("Welcome to Faithmap", "Here is your prayer invitation.<br/><br/>To respond to this prayer request, click the golden 'Pray' button. Thank you.", 300)  
                    }
                    //reset showPinpost so it doesn't display the prayer again when searching
                    showPinpost = null;
                }
            }      
            else
            {
                if (userSearch)   //if the user didn't push the Find button, it is the dbFindAll() call on the site load, ie we don't show message
                {      
                    $("findRequests"+j).innerHTML = "<div class='loadingDiv'>No results were found. <br/><br/>Try changing your search criteria. For example, zoom out to include more map coverage in your search.</div>"; //Service error is: " + err.description
                }
                map.AttachEvent("onchangeview", currentView)
            }  

            //if (userSearch) {enableBut("findViewBut")}  //only if user clicked button
        }
         
         
        function onMapError()
        {
            var j = $('tabberDivFind').tabber.index;
            $("findRequests"+j).innerHTML = "<div class='loadingDiv'>Sorry, prayer requests temporarily unavailable.<br/>Please try again in a little while. Thank you.</div>"
            map.AttachEvent("onchangeview", currentView)
            //msgBox("Oops!", "Could not get map data.", 300);              
            //alert("Database map data request failed");
        }


function getTabberIndex(myTabber)
{
    //find which tab was clicked
    var j
    if (myTabber.index) {j=myTabber.index}  else{j=0};   //if tab is not clicked ie default behavior is            
    return j
}


function getPrayerChain(mapID)
{

    map.Clear()
    clearMbrPane()    
    //add pin with mapID back on the map
    PageMethods.requestPrayerChain(mapID, onPrayerChainResult, onPrayerChainError); 

}


    function onPrayerChainResult(resultTable)  //returns table including columns id, lat, lon, primaryPic, display where the first row is the prayer ID and the other are the members ID
    {
        var pins = new Array();   
        //Spread items with same lat and lon so they can be visible on the map
        spreadPins(resultTable.rows)
        
        // Add prayer responses (candles) to map
        for (var i=1; i < resultTable.rows.length; i++)
        { 
            addPin(resultTable.rows[i].id, resultTable.rows[i].lat, resultTable.rows[i].lon, null, resultTable.rows[0].id)
            var usrPin = new VELatLong(resultTable.rows[i].lat, resultTable.rows[i].lon);
            pins.push(usrPin);
        }    
        
        //Add prayer request (pin) to the map  - I add last to be sure the candle icon shows
        var CGmapID = "PR"+ resultTable.rows[0].id
        addPin(CGmapID, resultTable.rows[0].lat, resultTable.rows[0].lon, null)
        var pin = new VELatLong(resultTable.rows[0].lat, resultTable.rows[0].lon);
        pins.push(pin);   
             
        if (pins.length == 1)   //with one item, user experience is not good when zooming in too close so we zoom back out
        {
            map.SetMapView(pins)
            map.SetZoomLevel(11);  
        }
        else
        {
            if (pins.length) {map.SetMapView(pins)};
            //map.ZoomOut();         // increases centering of pins
        }
        
        map.AttachEvent("onchangeview", currentView);
        //map.SetZoomLevel(12);
        clearPanes()
        
        fillMemberPane(resultTable)
        $("mbrPane").style.display = "block"
        $("welcomePane").style.display = "none" //make sure the welcome pane is not in the way
    
    }
    
    function onPrayerChainError()
    {
        msgBox("Oops!", "Could not get prayer chain.", 300);              
    }


function mapResults(resultTable)            //resultTable has the following columns: mapID, lat, lon    //old: CGmapID, lat, lon. (ex: "PGmapID", "lat", "lon")
{                                           // CGmapID is the concatenation of the concatenation of the category group and the mapID

    //Spread items with same lat and lon so they can be visible on the map
    spreadPins(resultTable.rows)

    // Add elements to map
    //for (var i=0; i < resultTable.rows.length; i++)
    for (var i=(resultTable.rows.length - 1); i >= 0; i--)
    {       
        //var CGmapID = getCG(resultTable) + getMapID(resultTable, i);        //ie PG203, contains a concatenation of the table category group and the mapID
        var CGmapID = "PR" + resultTable.rows[i].mapID
        addPin(CGmapID, resultTable.rows[i].lat, resultTable.rows[i].lon, null)
    }    
    map.AttachEvent("onchangeview", currentView);
    //map.SetZoomLevel(12);

}

function getMapID(table, rowNb)    //this gets the value inside the first column named [CG]mapID where [CG] is the category group prefix, ie PG, EV etc
{
    var firstColName = table.columns[0].name
    var mapID = eval("table.rows[rowNb]."+firstColName)  
    return mapID
}

function getCG(table)
{
    var firstColName = table.columns[0].name
    var CG = firstColName.slice(0,2)
    return CG  
}
         
/* old addPin function
function OLDaddPin(CGmapID, lat, lon)
{   
    CG = CGmapID.slice(0,2); 
    var pinIcon = eval("pinIcon"+CG);
    var pin = new VEPushpin(pinID, new VELatLong(lat, lon), pinIcon, pinID + "", CGmapID);    // pinID + "" converts mapID into a string type

    VEPushpin.ShowDetailOnMouseOver = false;        //This setting can also be made at a higher level (ie outside the loop) however to be safe
    VEPushpin.OnMouseOverCallback = pinHover;       //I'm doing it like in the code sample at: http://www.soulsolutions.com.au/Articles/PopupContentonDemand/tabid/98/Default.aspx
    map.AddPushpin(pin);    
    
    //var element = document.getElementById(pinID);
    //element.onclick = EventHandlerOnClick;

    pinID++;
}   */

function addPin(id, lat, lon, desc, mapID)  //desc is optional, only used in pin preview case
{   
    var pinIcon
    id = id+""; //converting id to a string to make sure the slice method below doesn't fail
    //id is either in the form of CGmapID for a prayer or ID for a user
    if (id.slice(0,2) == "PR") 
    {
        CG = id.slice(0,2);     
        pinIcon = eval("pinIcon"+CG);
    } else 
    {
        if (id == "pv")  { pinIcon = null}  //preview case, we display the default pin
        else {pinIcon = eval("pinIconCandle");}
    }
    
    var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(lat, lon));    // 
    pin.SetCustomIcon(pinIcon);
    pin.linkID = id;
    pin.SetTitle(""); //otherwise it contains "Untitled Item" by default
    if (desc) //case of preview pin where content is created on the client
    {
        pin.SetDescription(desc)
    } 
    if (mapID)  //this is the mapID associated to the userID so we can retrice the prayer response of the user for that mapID
    {
        pin.mapID = mapID
    } 
    map.AddShape(pin);

    /*//create user thumbnail - the thumbnail is has the same name as the primary pic except that it starts with "t" intead of "p"                
    var thumbnail
    if ((primaryPic != null) && (primaryPic != ""))
    {
        thumbnail = photoFolder+"/"+mbrFolder+"/t"+primaryPic.slice(1)
    }
    else
    {
        thumbnail = photoFolder+"/"+mbrDefaultThumbnail       
    } */
}  


function pinHover(x, y, title, details)   //this method to create a custom VE pop up comes from the article: http://www.soulsolutions.com.au/Articles/PopupContentonDemand/tabid/98/Default.aspx
{                                         // I have to use the same call back function for prayer request hover and member hover
    var pinID = title;
    var id = details;
    var divID = "VPOP" + id;
    var e=$(pinID+"_"+map.GUID);
    if(e!=null&&e!="undefined")
    {    
        //window.ero.setBoundingArea(new Microsoft.Web.Geometry.Point(0,0), new Microsoft.Web.Geometry.Point(document.body.clientWidth, document.body.clientHeight));
        window.ero.setContent("<div class='myPopUpDiv' id='" + divID + "'>Loading...</div>");
        window.ero.dockToElement(e);
        if (id.slice(0,2) == "PR") {getPinContent(id);} else {getUsrPinContent(id);}  //id is either a CGmapID or a userID
    }
}


function getUsrPinContent(usrID, mapID)
{

    PageMethods.getUsrSummary(usrID, mapID, onUsrSummaryResult, onUsrSummaryError);

}

    function onUsrSummaryResult(table)  //table with columns: memberID, display, aboutMe, link, faith, church, cmtRating, cmtDescription
    {
      try{
      
        var divID = "VPOP" + table.rows[0].memberID    // I need the mapID again since the PageMethods call is not passing it   
        var resultDiv = $(divID);
        var photo = "";
                
        //adding the high level pop up template
        str =  "<div id='cttCtnrUsr'>"
        str += "<div style='filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#f7fcfe', startColorstr='#E7F1F8', gradientType='0');'>"

        str += "<div id='myMapInfo1S'>"
        str += "    <div id='myMapPhotoSum'></div>"  
        str += "    <div id='myMapViewProfileLink'></div>"               
        str += "</div>"
        str += "<div id='myMapInfo2S'>"        
        str += "    <div id='myMapDisplayS'></div>"
        str += "    <div class='myMapProfileHdrDiv'><span class='myMapProfileHeader'>About me:</span><br /><span id='myMapAboutMeS'></span></div>"
        str += "    <div class='myMapProfileHdrDiv'><span class='myMapProfileHeader'>Personal site:</span><span id='myMapLinkS'></span></div>"
        str += "    <div class='myMapProfileHdrDiv'><span class='myMapProfileHeader'>Faith:</span><span id='myMapFaithS'></span></div>"
        str += "    <div class='myMapProfileHdrDiv'><span class='myMapProfileHeader'>Denomination:</span><span id='myMapChurchS'></span></div>"                        
        //str += "    <div class='myMapProfileHdrDiv'><span class='myMapProfileHeader'>Member since:</span><span id='myMapJoinedS'></span></div>"                      
        str += "</div>"

        str += "</div>"
         str += "<div id='myUsrPrayer' class='rvwBlockFindUsr'></div>"       
        str += "</div>"

        resultDiv.innerHTML = str

       $("myMapDisplayS").innerHTML = "<a class='mbrLink' href='javascript:viewProfile("+table.rows[0].memberID+", \""+escape(table.rows[0].display)+"\")'>"+table.rows[0].display+"</a>";
       //$("myMapDisplayChange").innerHTML = "<a class='link' href='#'>change display name</a>"
       
       $("myMapAboutMeS").innerHTML = table.rows[0].aboutMe
       
       $("myMapLinkS").innerHTML = createLink(table.rows[0].link)
       
       $("myMapFaithS").innerHTML = createFaith(table.rows[0].faith)
       
       $("myMapChurchS").innerHTML = table.rows[0].church
       
       //$("myMapJoinedS").innerHTML = table.rows[0].joinedOn.format("MMM d, yyyy");
        
       $("myMapViewProfileLink").innerHTML = "<a class='link' href='javascript:viewProfile("+table.rows[0].memberID+", \""+escape(table.rows[0].display)+"\")'>view profile</a>"         
        
       if (table.rows[0].primaryPic != null)
       {        photo = photoFolder+"/"+mbrFolder+"/"+table.rows[0].primaryPic;}
       else {   photo = photoFolder + "/" + mbrDefaultPhoto;}

       $("myMapPhotoSum").innerHTML = "<a href='javascript:viewProfile(" + table.rows[0].memberID + ", \"" + escape(table.rows[0].display) + "\")'><img class='mbrThumbnail' src=" + photo + " alt=''/></a>"  
        
       $("myUsrPrayer").innerHTML = "<span class='rvwRating' id='rvwRating0'>"+createRating2(1, table.rows[0].cmtRating)+"</span><span class='rvwDesc'>"+table.rows[0].cmtDescription+"</span>" 
        
       //Nifty("div.myPopUpDiv", "top transparent");    //BUG BUG: ironically without Nifty, the pop up does not display cttSum content...
       //Nifty("div#cttSum", "transparent");
       //Nifty("div#cttCtnr", "top transparent");
        
        //update Infobox description
        updateInfoBoxDescription(divID)
        
       } catch(err){} 
    }

    function onUsrSummaryError()
    {
        msgBox("Oops!", "Could not get user information.", 300);    
    }

function updateInfoBoxDescription(divID)
{
    var pinID = $(divID).lang;  //using lang attr to store the pin ID
    var myPin = map.GetShapeByID(pinID)
    var str = "<div class='myPopUpDiv' id='" + divID + "' lang='"+pinID+"'>"
    str += escape($(divID).innerHTML)
    str += "</div>"
    myPin.SetDescription(str)
    CustomHideInfoBox(myPin)
    CustomShowInfoBox(myPin) 
}

function getPinContent(CGmapID)
{    
      CG = CGmapID.slice(0,2);
      mapID = CGmapID.slice(2);
      
      var postsQueryStr = "SELECT "+CG+"posts.mapID, "+CG+"posts.title, "+CG+"posts.description, "+CG+"posts.status, "+CG+"posts.ratingTotal, "+CG+"posts.ratingCount, "+CG+"posts.primaryPic, "+CG+"posts.notifyMe, "
      postsQueryStr += "mbrProfile.memberID, mbrProfile.display, mbrProfile.primaryPic AS 'primaryMbrPic' "
      postsQueryStr += "FROM "+CG+"posts INNER JOIN ("+CG+"postRef INNER JOIN mbrProfile ON "+CG+"postRef.memberID = mbrProfile.memberID) ON "+CG+"posts.mapID = "+CG+"postRef.mapID WHERE "+CG+"posts.mapID = " + mapID;
      var detailQueryStr = "SELECT time, age, cost, phone, web FROM "+CG+"postDetails WHERE mapID = " + mapID;
      //var commentsQueryStr = "SELECT cmtTitle, cmtDescription, cmtDate, cmtRating, cmtMemberID FROM PGcomments WHERE mapID = " +mapID;
      var commentsQueryStr = "SELECT "+CG+"comments.cmtTitle, "+CG+"comments.cmtDescription, "+CG+"comments.cmtDate, "+CG+"comments.cmtRating, "+CG+"commentRef.memberID, mbrProfile.primaryPic, mbrProfile.display, mbrProfile.email ";
      commentsQueryStr += "FROM "+CG+"comments INNER JOIN "+CG+"commentRef INNER JOIN mbrProfile ON "+CG+"commentRef.memberID = mbrProfile.memberID ON "+CG+"comments.cmtID = "+CG+"commentRef.cmtID WHERE ("+CG+"commentRef.mapID = "+mapID+") ";
      commentsQueryStr += "ORDER BY "+CG+"comments.cmtDate DESC";   
           
      var myQueryStr = postsQueryStr + ";" + detailQueryStr + ";" + commentsQueryStr + ";";
        
      if ((CG == "EV") || (CG == "PD")) //retrieve either exact date or date range
      {
        myQueryStr += "IF EXISTS (SELECT NULL FROM " + CG + "dateRange WHERE mapID = " + mapID + ") ";
        myQueryStr += "SELECT dateMin, dateMax, days FROM " + CG + "dateRange WHERE mapID = " + mapID + " ";
        myQueryStr += "ElSE SELECT date FROM " + CG + "dateExact WHERE mapID = " + mapID + ";";
      }  

      PageMethods.requestContentData(CG, myQueryStr, onContentResult, onContentError);
                
    
}    


    function onContentResult(resultDataSet)              //callback function that processes the page method call return value.
    {
     //    retrieve content from retuned tables and format content   
     
    try{
        var postsTbl = resultDataSet.tables[0];
        var detailsTbl = resultDataSet.tables[1]
        var commentsTbl = resultDataSet.tables[2];
        
        var CG = getCG(postsTbl);
        var mapID = getMapID(postsTbl, 0);
        var notifyMe
        if (postsTbl.rows[0].notifyMe) {notifyMe = true} else {notifyMe = false}

        var divID = "VPOP" + CG + mapID;  //+postsTbl.rows[0].mapID    // I need the mapID again since the PageMethods call is not passing it
        
        var resultDiv = $(divID);
                   
     if(resultDiv)
     {
            //adding the high level pop up template
            str = "<div id='cttCtnr'>"
            str += "<div id='cttSum' style=\"filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#f7fcfe', startColorstr='#E7F1F8', gradientType='0');\">"
                str += "<div id='cttHeadr'>"
                    str += "<a class='closeInfoBut' href='javascript:CustomHideInfoBox(_currentShape);'>x</a>"
                    //str += "<div id='cttRating'><div id='cttCtrl'></div><div id='cttRateAct'></div></div>"
                    //str += "<div id='cttTitle'></div></div>"
                    str += "<span id='cttTitle'></span>"
                    str += "<nobr><span id='cttRating'><span id='cttCtrl'></span><span id='cttRateAct'></span></span></nobr>"
                str += "</div>"
                str += "<div id='cttDesc'><div class='cttPhotoCtnr'><div id='cttPhoto'></div><div id='cttPhotoMenu'></div></div><div id='cttTxt'></div></div>"
                str += "<div id='cttDtls'></div>"
                str += "<div id='cttSumBottom'><div id='cttCreatedBy'></div><div id='cttTopMenu'></div></div>"
            str += "</div>"  //end cttSum div
            str += "<div id='cttCmt'><div id='cttCmtHdr'>First to respond...</div><span id='cttNewReview'></span>"
            str += "<hr class='cmtLine'/>"
            str += "<div id='cttReviews'></div></div></div>"
        
            resultDiv.innerHTML = str
       
   
            //adding title to template
        $("cttTitle").innerHTML = postsTbl.rows[0].title
        
            //calculate rating and accordingly set rating star images
        if (CG != "PD"){ //don't insert rating control for playdate view
        if ((postsTbl.rows[0].ratingCount != 0) && (postsTbl.rows[0].ratingCount != null))
        {
            var rating = postsTbl.rows[0].ratingTotal/postsTbl.rows[0].ratingCount             
            createRating(2, rating, "cttCtrl")            // insert rating control (stars) in the div with id 'cttCtrl' 
            if (postsTbl.rows[0].status != 1) {
            $("cttRateAct").innerHTML = "<a class='link' href='javascript:newReview(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\","+notifyMe+")'>light a candle</a>"  //escaping in case the title contains apostrophes
            } else { $("cttRateAct").innerHTML = "Prayer Answered" }
        }
        else
        {
            createRating(2, 0, "cttCtrl")            // insert empty rating control  
            if (postsTbl.rows[0].status != 1) {
            $("cttRateAct").innerHTML = "<a class='link' href='javascript:newReview(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\","+notifyMe+")'>first to light a candle!</a>"            
            } else { $("cttRateAct").innerHTML = "Prayer Answered" }        
        }
        }
        
            //add description text
        $("cttTxt").innerHTML = decHtmUpdate(postsTbl.rows[0].description)
        
            //add photo primaryPic
        if (postsTbl.rows[0].primaryPic != null)  //show primaryPic photo as well as links to view more/add photos
        {
            //important: when passing variables into the href link, we must take into account the variable type, and if a string put quotes around it. Here CG is a string while mapID is an int
            $("cttPhoto").innerHTML = "<a href='javascript:getSlideShow(\"" + CG + "\"," + mapID + ",\"" + postsTbl.rows[0].primaryPic.slice(1) + "\");'><img class='mbrThumbnail' src='" + photoFolder + "/" + CG + "/" + postsTbl.rows[0].primaryPic + "' alt='click to enlarge'></a>"      
            if (myUser.memberID == postsTbl.rows[0].memberID)
                {$("cttPhotoMenu").innerHTML = "<a class='link' href='javascript:showBox(\"Add photo\", 330, 250, \"photoUpload.aspx?id="+mapID+"&catG="+CG+"&tn=1&m="+myUser.memberID+"\");'><img src='icons/icon-photo.gif' class='navIcon'/>add photo</a>"}         
        }
        else                                        //show default photo and link to add photo with tn=0 so we know to create a primaryPic
        {
            $("cttPhoto").innerHTML = "<img class='mbrThumbnail' src='" + photoFolder + "/" + defaultPhoto + "' alt='placeholder graphic'></a>";
            if (myUser.memberID == postsTbl.rows[0].memberID)        
                {$("cttPhotoMenu").innerHTML = "<a class='link' href='javascript:showBox(\"Add photo\", 330, 250, \"photoUpload.aspx?id="+mapID+"&catG="+CG+"&tn=0&m="+myUser.memberID+"\");'><img src='icons/icon-photo.gif' class='navIcon'/>add photo</a>"}  
        }
        
                
            //add details
            
        var detailStr = "<br/>"
  
        if ((CG == "EV") || (CG == "PD"))   //Event or playdate case
        {
            var dateTbl = resultDataSet.tables[3];  //this is either a table of exact dates (1 column) or of range (3 columns).          
            detailStr += "<div class='dtlDiv'><span class='dtlTitle'>dates: </span><span class='dtlValue'>"
            if (dateTbl.columns.length > 1)  //case of date range
            {
                detailStr += dateTbl.rows[0].dateMin.format("M/d/yy") + " to " + dateTbl.rows[0].dateMax.format("M/d/yy")                             
                if ((dateTbl.rows[0].days != null) && (dateTbl.rows[0].days != ""))
                {
                    var days = ""
                    var arr = dateTbl.rows[0].days.split(",")
                    for (i=0;i<arr.length;i++)
                    {
                        days += dayName(arr[i])
                        if (i < arr.length - 1)
                        {
                            days += ","
                        }
                    }     
                    detailStr += " ("+days+")"
                }
            }
            else    //case of exact dates
            {
                for (i=0;i<dateTbl.rows.length;i++)
                {
                    detailStr += dateTbl.rows[i].date.format("M/d/yy")
                    if (i < (dateTbl.rows.length - 1))
                    {
                        detailStr += "," 
                    }
                }
            }
            detailStr += "</span></div>"
        }
      
        for (var i=0; i < detailsTbl.columns.length; i++)
        {       
            colName = detailsTbl.columns[i].name;                    
            colValue = eval("detailsTbl.rows[0]."+colName);
            if (colName == "age") {colValue = createAgeText(colValue)}  //in the case of age we need to make the value more readable (ex "3,7" becomes "3 to 7") or ("100,-1" becomes "all ages")
            if ((colValue != null) && (colValue != "") && colName != "mapID")  //only display detail line if value is not empty and do not display mapID
            {
                if (colName == "web") {colValue = createLink(colValue); colName = "link"}  //in the case of web, we create a hyperlink, also rename the link label from web to link
                detailStr += "<div class='dtlDiv'><span class='dtlTitle'>"+colName+": </span><span class='dtlValue'>"+colValue+"</span></div>"
            }
        }
        
        $("cttDtls").innerHTML = detailStr 
        
        
        //create CreatedBy link
        
        //the thumbnail is has the same name as the primary pic except that it starts with "t" intead of "p"
        if ((postsTbl.rows[0].primaryMbrPic != null) && (postsTbl.rows[0].primaryMbrPic != ""))
        {
            thumbnail = photoFolder+"/"+mbrFolder+"/t"+postsTbl.rows[0].primaryMbrPic.slice(1)
        }
        else
        {
            thumbnail = photoFolder+"/"+mbrDefaultThumbnail       
        }    
        $("cttCreatedBy").innerHTML = "prayer request from: <a class='mbrLink' href='javascript:viewProfile("+postsTbl.rows[0].memberID+", \""+escape(postsTbl.rows[0].display)+"\")'><span class='displayPopUp'>"+postsTbl.rows[0].display+"</span><img class='tinyPic' src='"+thumbnail+"'/></a>"
        
        //create menu items
        if (CG != "PD"){
        // add bookmark link
        //var bookmarkStr = "<a id='bookmarkLink' class='link' href='javascript:addBookmark(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\")'><img src='icons/icon-bookmark.gif' class='navIcon'/>bookmark</a>"
        var STFriendsStr = "<a id='stfLink' class='link' href='javascript:pickFriends(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\")'><img src='icons/icon-mail.gif' class='navIcon'/>send to friend</a>"
        var PrayerChainStr = "<a id='prayerChainLink' class='link' href='javascript:getPrayerChain("+mapID+")'><img src='icons/icon-people.gif' class='navIcon'/>view prayer chain</a>"        
        $("cttTopMenu").innerHTML = "<ul><li>" + PrayerChainStr+ "</li><li>"+STFriendsStr + "</li></ul>";     
        //$("cttTopMenu").innerHTML = STFriendsStr + "<br/>" + bookmarkStr 
        }
        if (CG != "PD"){
        // add 'add review' link
            if (postsTbl.rows[0].status != 1){
            $("cttNewReview").innerHTML = "<a class='reviewPrayBut' href='javascript:newReview(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\","+notifyMe+")'>Pray</a>"  //<img src='icons/icon-comment.gif' class='navIcon'/>
            } else { $("cttNewReview").innerHTML = "<div class='PrayerAnsweredDiv'>Prayer Answered !</div>" }
        }
        else
        {
            $("cttTopMenu").innerHTML = "<a id='pdReplyBut' href='javascript:newReview(\""+CG+"\","+mapID+",\""+escape(postsTbl.rows[0].title)+"\","+notifyMe+")'>Reply</a>"
        }
        
    //try    //this prevents javascript crash on error 
          
                 
            //add comments
        
        var reviewStr = "";
             
        if (commentsTbl.rows)     //if the comments table returned from server is null, commentsTbl.rows will be undefined and this is equivalent to False in Javascript
      
        {  
            if (CG != "PD") {
                var responseHdrTxt
                if (commentsTbl.rows.length == 1) {responseHdrTxt = "response" } else {responseHdrTxt = "responses" }
                $("cttCmtHdr").innerHTML = commentsTbl.rows.length + " " + responseHdrTxt;
            }else{
                replyEmpty = 0; replyYes = 0; replyMaybe = 0; replyNo = 0; 
                for (i=0;i<commentsTbl.rows.length;i++)
                {
                    switch(commentsTbl.rows[i].cmtRating)
                    {
                        case 0:
                            replyEmpty += 1; break;
                        case 1:
                            replyYes += 1; break;
                        case 2:
                            replyMaybe += 1; break;  
                        case 3:
                            replyNo += 1; break;
                    }
                }
                $("cttCmtHdr").innerHTML = "Replies:  "+ replyYes + "<img class='icon' src='icons/dotGreen.png'/>, "+ replyMaybe +"<img class='icon' src='icons/dotYellow.png'/>, " + replyNo + "<img class='icon' src='icons/dotRed.png'/>, "+ replyEmpty + "<img class='icon' src='icons/dotWhite.png'/>" ;
            }
                
            //add each member comment
            for(var i = 0; i < commentsTbl.rows.length; i++)
            {
                //the thumbnail is has the same name as the primary pic except that it starts with "t" intead of "p"
                if ((commentsTbl.rows[i].primaryPic != null) && (commentsTbl.rows[i].primaryPic != ""))
                {
                    thumbnail = photoFolder+"/"+mbrFolder+"/t"+commentsTbl.rows[i].primaryPic.slice(1)
                }
                else
                {
                    thumbnail = photoFolder+"/"+mbrDefaultThumbnail       
                }
                
                reviewStr += "<div class='cttReview'>"
                reviewStr += "<div class='mbrBit' id='mbrBit" + commentsTbl.rows[i].memberID + "'><a class='mbrLink' href='javascript:viewProfile(" + commentsTbl.rows[i].memberID + ", \"" + escape(commentsTbl.rows[i].display) + "\")'><img class='mbrThumbnail' src='" + thumbnail + "'/><div>" + commentsTbl.rows[i].display + "</div></a></div>"
                reviewStr += "<div class='rvwBlock'>" //style=\"filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFC6', startColorstr='#FFFFFF', gradientType='0');\"
                
                if (CG != "PD") {reviewStr += "<span class='rvwRating' id='rvwRating"+i+"'>"+createRating2(1, commentsTbl.rows[i].cmtRating)+"</span><span style='display:none' class='rvwTitle'>"+commentsTbl.rows[i].cmtTitle+"</span>"}
                else { // case of playdate, we put the name + (email) in rvwTitle
                    if (commentsTbl.rows[i].display){reviewStr += "<span class='rvwTitle'>"+commentsTbl.rows[i].display+" ("+commentsTbl.rows[i].email+")</span>"}
                    else {reviewStr += "<span class='rvwTitle'>"+commentsTbl.rows[i].email+"</span>"}
                    if (i == 0) {reviewStr += " - Organizer";}  // first comment (reply) added is always that of the organizer and is being returned first in the query
                    reviewStr += "<span id='rvwRating"+i+"'>"+createReply(commentsTbl.rows[i].cmtRating)+"</span>"
                }
                
                reviewStr += "<span class='rvwDesc'>"+commentsTbl.rows[i].cmtDescription+"</span></div>"
                
                if (commentsTbl.rows[i].cmtDate){reviewStr += "<div class='rvwDate'>"+commentsTbl.rows[i].cmtDate.format("MMM d, yyyy")+"</div>"}
                
                reviewStr += "</div>"
                //if (i < (commentsTbl.rows.length -1)) {reviewStr += "<hr class='cmtLine'/>"}
            }
        
            $("cttReviews").innerHTML = reviewStr;
            /*
            for (var i = 0; i < commentsTbl.rows.length; i++)
            {
                createRating(1, commentsTbl.rows[i].cmtRating, "rvwRating"+i)
            }
            */
            
            // populateUsers
        }
        else
        {
            //$("cttReviews").innerHTML = "No review yet."; 
        }
    
    
    // add styling to pop-up
    
        //Nifty("div.ero", "transparent");
    //Nifty("div.ero-actionsBackground", "transparent");
    /*arrClass = getElementsByClass("ero-shadow")
    for (i=0;i<arrClass.length;i++)
    {
        arrClass[i].style.background = "transparent";
    }*/

        Nifty("div.myPopUpDiv", "top transparent");    //BUG BUG: ironically without Nifty, the pop up does not display cttSum content...
        Nifty("div#cttSum", "transparent");
        Nifty("div#cttCtnr", "top transparent");
        Nifty("div.rvwBlock", "small transparent");
        
        if (document.all)  {  // round buttons for IE only (Firefox forces a left float on the anchor which makes the buttons uncentered. Attenpts to center on Firefox didn't work
            Nifty("a.reviewPrayBut", "small transparent")   //round the Reply button - need to use 'small' rouding otherwise this makes the text inside the button disappear
        }
        
        
     } //end if (resultDiv)
        
       
        //update Infobox description
        updateInfoBoxDescription(divID)

        
        //Nifty("div.ero-shadow", "transparent");
        //Nifty("div.ero-body", "transparent");
        //Nifty("div.ero-previewArea", "top transparent");
        /*  
        arr = getElementsByClass("ero-previewArea")
        for (i=0;i<arr.length;i++)
        {
            arr[i].style.display = "none";
        }  
        resultDiv.parentNode.parentNode.style.display = "block";
         
        arr = getElementsByClass("myPopUpDiv")
        for (i=0;i<arr.length;i++)
        {
            arr[i].style.display = "none";
        }  
        
        resultDiv.style.display = "block";
          */
     } 
     catch(err)
     {
        //msgBox("Oops!", "Could not show item content.", 300, 100) 
     }            
    }
     
     
    function onContentError()
    {
        msgBox("Oops!", "Database content data request failed", 300);
        //alert("Database content data request failed");
    }


function getSlideShow(CG, mapID, pic)
{
    if (pic) //if a pic number is passed, initialize the start show on that pic
    {
        $("selectedPic").value = pic
    }  
    
    PageMethods.getPhotos(CG, mapID, onPhotoResult, onPhotoError)
}


    function onPhotoResult(resultTable)              //callback function that processes the page method call return value.
    {
        
        //showBox("Photo Show", 600, 400, "photoShow.aspx")           
        createSlideShow(resultTable);
  
        $("slideshow").style.display="block"
        
        if (resultTable.rows.length == 1)
        {
            $("ss_controls").style.display = "none";
            $("ss_thumbnails").style.display = "none";      
            ss.pause();
        }
        else
        {
            $("ss_controls").style.display = "block";
            $("ss_thumbnails").style.display = "block";   
        } 
    }
     
     
    function onPhotoError()
    {
            msgBox("Oops!", "Database Photo request failed", 300, 100);
            //alert("Database Photo request failed");
    }


function createRating(id, value, divID)
{
    var imageOnUrl = "icons/StarOn.gif"
    var imageOnHalfUrl = "icons/StarOnHalf.gif"
    var imageOffUrl = "icons/StarOffBlue.png"        //star with blue background
	
	if (id == 2)   //use red stars instead of yellow stars (yellow stars are used in the comments section)
	{
	    imageOnUrl = "icons/StarOverBlue.png"
        imageOnHalfUrl = "icons/StarOverHalfBlue.png"
	}
	
    var rMin = Math.floor(value)   //round rating to low end
    var halfStar = false   //to know if I should add a half star icon
    var n = rMin       //number of full stars  
    
    if (value >= (rMin + 0.75))
    {   n = rMin + 1;}
    else
    {   if (value >= (rMin + 0.25))
        {halfStar = true;}
    }
    
    var str = ""
    
   	for (var i=1;i<=5;i++)
   	{
   	    if (i<=n)
            {str = str + "<img id='"+id+"star"+i+"' src='"+imageOnUrl+"'/>"}
   	    else
   	    {   if(halfStar == true)
   	        {
   	            str = str + "<img id='"+id+"star"+i+"' src='"+imageOnHalfUrl+"'/>";
   	            halfStar = false;
   	        }
   	        //else {str = str + "<img id='"+id+"star"+i+"' src='"+imageOffUrl+"'/>"}
   	    }
   	 } 
    if ((n == 0) && (halfStar == false)) {str = "<img src='icons/StarOffBlue.png'/>"}  //display empty candle when no rating
    
    $(divID).innerHTML = str
}


function createRating2(id, value)    //same as createRating function above except it returns the rating as a string instead of assigning it to a div.
{
    var imageOnUrl = "icons/StarOn.gif"
    var imageOnHalfUrl = "icons/StarOnHalf.gif"
    var imageOffUrl = "icons/StarOff.gif"
	
	if (id == 2)   //use red stars instead of yellow stars (yellow stars are used in the comments section)
	{
	    imageOnUrl = "icons/StarOver.gif"
        imageOnHalfUrl = "icons/StarOverHalf.gif"
        imageOffUrl = "icons/StarOffBlue.png"
	}
	
    var rMin = Math.floor(value)   //round rating to low end
    var halfStar = false   //to know if I should add a half star icon
    var n = rMin       //number of full stars  
    
    if (value >= (rMin + 0.75))
    {   n = rMin + 1;}
    else
    {   if (value >= (rMin + 0.25))
        {halfStar = true;}
    }
    
    var str = ""
    
   	for (var i=1;i<=5;i++)
   	{
   	    if (i<=n)
            {str = str + "<img id='"+id+"star"+i+"' src='"+imageOnUrl+"'/>"}
   	    else
   	    {   if(halfStar == true)
   	        {
   	            str = str + "<img id='"+id+"star"+i+"' src='"+imageOnHalfUrl+"'/>";
   	            halfStar = false;
   	        }
   	        //else {str = str + "<img id='"+id+"star"+i+"' src='"+imageOffUrl+"'/>"}
   	    }
   	 } 
   	 //if ((n == 0) && (halfStar == false)) {str = "<img src='"+imageOffUrl+"'/>"}  //display empty candle when no rating

    return str
}

function createReply(reply)
{
    switch(reply)
    {
        case 0:
            str = "<img class='icon' src='icons/dotWhite.png'/>Not yet replied"    
            break
        case 1:
            str = "<img class='icon' src='icons/dotGreen.png'/><b>Yes</b>"    
            break
        case 2:
            str = "<img class='icon' src='icons/dotYellow.png'/><b>Maybe</b>"   
            break
        case 3:
            str = "<img class='icon' src='icons/dotRed.png'/><b>No</b>"    
            break
        default:
            msgBox("Oops!", "Invitee reply not recognized.", 300);
     }
    
    return str
}


function disposeMap() //dispose map etc
{
    if (map && map.vemapcontrol)  // (map != null)
    {
        map.Dispose();
    }
}
   
        

function initFindDateChooser()
{
  
		/*
			Example 2 Description:
			The DateChooser will not close until a date is chosen.
			It will show 5 pixels to the right of, and 5 pixels above the click.
			It will initially open with a date of April 19 of the current year.
			It will update the 'dateinputex2' input with the PHP-style date 'D., M j Y' (ex. Wed., Apr 19 2006).
			It will add a link to the right of the 'dateinputex2' input, with text 'Example 2'.
			The link will have the default title ('Click to choose a date').
*/

		var DC1 = $('dateChooserFind1');
		DC1.DateChooser = new DateChooser();
		DC1.DateChooser.setUpdateFunction(clearFindDateRange);
		DC1.DateChooser.setXOffset(0);
		DC1.DateChooser.setYOffset(0);
		DC1.DateChooser.setUpdateField('dateInputFind1', 'n/j/y');
		DC1.DateChooser.setIcon('icons/calendar.png','dateInputFind1', true, 'Click to select date');
		//DC1.DateChooser.setUpdateFunction(updateDates(););
		
		var DC2 = $('dateChooserFind2');
		DC2.DateChooser = new DateChooser();
		DC2.DateChooser.setUpdateFunction(clearFindDateExact);
		DC2.DateChooser.setXOffset(0);
		DC2.DateChooser.setYOffset(0);
		DC2.DateChooser.setUpdateField('dateInputFind2', 'n/j/y');
		DC2.DateChooser.setIcon('icons/calendar.png','dateInputFind2', true, 'Click to select date');
		
		var DC3 = $('dateChooserFind3');
		DC3.DateChooser = new DateChooser();
		DC3.DateChooser.setUpdateFunction(clearFindDateExact);
		DC3.DateChooser.setXOffset(0);
		DC3.DateChooser.setYOffset(0);
		DC3.DateChooser.setUpdateField('dateInputFind3', 'n/j/y');
		DC3.DateChooser.setIcon('icons/calendar.png','dateInputFind3', true, 'Click to select date');
  	
		var DCpost1 = $('dateChooserPost1');
		DCpost1.DateChooser = new DateChooser();
		DCpost1.DateChooser.setUpdateFunction(updateDates);
		DCpost1.DateChooser.setXOffset(0);
		DCpost1.DateChooser.setYOffset(0);
		DCpost1.DateChooser.setUpdateField('dateInputPost1', 'n/j/y');
		DCpost1.DateChooser.setIcon('icons/calendar.png','dateInputPost1', true, 'Click to select date');  		
  		
  		var DCpost2 = $('dateChooserPost2');
		DCpost2.DateChooser = new DateChooser();
		DCpost2.DateChooser.setUpdateFunction(clearDateExact)  //if the user inputs a date in the date range we clear the date exact field 
		DCpost2.DateChooser.setXOffset(0);
		DCpost2.DateChooser.setYOffset(0);
		DCpost2.DateChooser.setUpdateField('dateInputPost2', 'n/j/y');
		DCpost2.DateChooser.setIcon('icons/calendar.png','dateInputPost2', true, 'Click to select date');  	
		
		var DCpost3 = $('dateChooserPost3');
		DCpost3.DateChooser = new DateChooser();
		DCpost3.DateChooser.setUpdateFunction(clearDateExact)  //if the user inputs a date in the date range we clear the date exact field 
		DCpost3.DateChooser.setXOffset(0);
		DCpost3.DateChooser.setYOffset(0);
		DCpost3.DateChooser.setUpdateField('dateInputPost3', 'n/j/y');
		DCpost3.DateChooser.setIcon('icons/calendar.png','dateInputPost3', true, 'Click to select date');  	
}  

function clearFindDateExact()
{
    $("dateInputFind1").value = "";
    $("dateInputFind2").style.color = "black"
    $("dateInputFind3").style.color = "black"
}

function clearFindDateRange()
{
    $("dateInputFind2").value = "";
    $("dateInputFind3").value = "";
    $("dateInputFind1").style.color = "black"
}

function clearFindPane()
{
    //clear location input field
    $("userLoc").value = ""
    
    //reset age drop down to first value ie "all ages"
    $("ageList").selectedIndex = 0
    
    //clear all check boxes
    for (i in CatID)
    {
        $(CatID[i]).checked = false;    //Find check boxes have the id: CatId[i]
    }
    
    //reset dates fields
    //$("dateInputFind1").value = "";
    //$("dateInputFind2").value = "today";
    //$("dateInputFind3").value = "";
    
    $("findPane").style.display = "none"
    //map.Clear();
    deactivateNavButtons()
    
}


/**********************************/
/* Send To Friend pane functions  */
/**********************************/

function pickFriends(CG, mapID, title)   //don't need to be logged on to send Friends
{
    title1 = unescape(title)
    $("STFCG").value = CG
    $("STFmapID").value = mapID
    $("pickFriendsDiv").style.display = "none";
    $("STFheader").innerHTML = "Share <span class='rvwTitle'>"+title1+"</span>with your friends by selecting or typing their emails.<br/><br/>A link to this prayer request will be sent to them."  
    
    if (myUser.memberID) //if user is a member, check if she already have friends
    {
        PageMethods.getFriendsInfo(myUser.memberID, onSTFriendsResult, onSTFriendsError)
        //$("STFCCmeDiv").style.display = "block"
    }  
    else {$("STFCCmeDiv").style.display = "none"}  //if not logged in, this does not apply since we don't know the user
    
    if (myUser.name) {$("STFriendName").value = myUser.name} else {$("STFriendName").value = ""}
    $("sendToFriendPane").style.display = "block";
    $("STFnewFriends").focus();
}

    function onSTFriendsResult(resultTable)   //returns memberID, email, display, primaryPic
    {
        if (resultTable.rows)
        {
            $("pickFriendsDiv").style.display = "block";
            $("STFfriends").innerHTML = "";         //clear "Loading..." text
            for (i=0; i<resultTable.rows.length; i++)
            {
                //createFriend function is located in playdate.js
               createFriend($("STFfriends"), resultTable.rows[i].memberID, resultTable.rows[i].email, resultTable.rows[i].display, resultTable.rows[i].primaryPic, "STFriendsCB", "cbSTFriend")
            }            
        }
        else
        {
            $("pickFriendsDiv").style.display = "none";
        }
    }
    
    function onSTFriendsError()
    {
    }
    
function cancelSendToFriend()
{
    clearSendToFriend()
}

function clearSendToFriend()
{
    $("STFfriends").innerHTML = ""
    $("STFnewFriends").value = ""
    $("STFriendSubject").value = ""
    $("STFriendBody").value = ""
    $("STFCG").value = ""
    $("STFmapID").value = ""
    $("STFCCme").checked = "false"
    $("STFriendName").value = ""
    
    $("sendToFriendPane").style.display = "none";
}

function sendToFriend()  
{

    valid = validateSTFriend()
    if (valid)
    {   //this code is also in post.js (prototype.build)
        var oldFriends = getCheckBoxes("STFriendsCB", "cbSTFriend");  //returns id of existing friends
        var newFriends = new Array();
        
        //friendsEmail array will be passed to the server for sending email to friends
        var arrFriendEmail = getCheckBoxes("STFriendsCB", "")
        for (i=0; i<arrFriendEmail.length; i++)
        {
            arrFriendEmail[i] = $(arrFriendEmail[i]).className;   //the email is stored in the class attribute of the check box
        }    
        
        // handle new friends
        if ($("STFnewFriends").value.trims() != "") //avoid email processing if user just typed a blank space
        {
            newFriends = $("STFnewFriends").value.split(",")
            for (i=0;i<newFriends.length;i++)    //trims leading and trailing white spaces in emails 
            {
                newFriends[i] = newFriends[i].trims()
            } 
                               
            //scrub new friends against friends list and eliminate dupes;  
            var arrEmail = getCheckBoxes("STFriendsCB", "")    //array of existing friends emails to be passed so the server can send email to them
            for (i=0;i<arrEmail.length;i++) 
            {
                arrEmail[i] = $(arrEmail[i]).className;   //the email is stored in the class attribute of the check box
            }            
            for (i=0;i<newFriends.length;i++)     
            {
                for (j=0;j<arrEmail.length;j++)
                {
                    if (newFriends[i] == arrEmail[j])
                    {
                        newFriends.splice(i,1)   //removes the element at index i from the array
                        break;
                    }
                }      
            }
        }
        
        //making sure that if memberID is undefined or null, that we pass a value the server will recognize, ie "0"
        if (myUser.memberID) {mbrID = myUser.memberID}
        else {mbrID = 0}
        
        var userName = ""
        var storeUserName = false; //tells the server to add user name to database
        if ($("STFriendName").value.trims() != "") {userName = $("STFriendName").value.trims()} else {userName = myUser.display}
        if (($("STFriendName").value.trims() != "") && (myUser.name == "")) {storeUserName = true}
        
        disableBut("STFbut"); 
        PageMethods.sendEmailToFriends(mbrID, myUser.email, userName, storeUserName, convertToCGid($("STFCG").value), $("STFmapID").value, oldFriends, arrFriendEmail, newFriends, $("STFriendSubject").value.trims(), $("STFriendBody").value.trims(), $("STFCCme").checked, onSTFriendResult, onSTFriendError)
    }
    
}

function validateSTFriend()
{
    //check that fields are not empty   
    if (($("STFnewFriends").value.trims() == "") && (getCheckBoxes("STFriendsCB", "cbSTFriend").length == 0))   //empty email field and check boxes
    {
        msgBox("Oops!", "Please enter or select friends.", 300)   
        return false
    }

    //validate emails
    if (($("STFnewFriends").value != "") && ($("STFnewFriends").value.trims() != "")) 
    {
        arr = $("STFnewFriends").value.split(",")
        for (i=0;i<arr.length;i++)
        {
            arr[i] = arr[i].trims()       //trims leading and trailing white spaces in emails
            if (!emailValid(arr[i]))
            {
                msgBox("Oops!", "The following email is not valid: " + arr[i] +".", 300)
                return false
            }
            if (arr[i] == myUser.email)
            {
                msgBox("Oops!", "Please remove your own email (" + arr[i] +") from your friends email list.<br/><br/>You can get copied on the sent email by selecting the 'Email it to me too' check box.", 300)
                return false
            }
        } 
    }
    
    if (isEmpty($("STFriendSubject"))) 
    {
        $("STFriendSubject").value = "Prayer request on Faithmap"
    } 
            
    return true;
}


function onSTFriendResult()
{
        enableBut("STFbut");
        clearSendToFriend()
        msgBox("Thank you", "This prayer request has been sent.", 300)   
}

function onSTFriendError()
{
        msgBox("Oops!", "Could not send item.", 300)   
}

 
       
function createPrayerList(Tbl, divID) 
{
    if (!Tbl.rows){return} 
    var rating;
    var reviewStr = "";

    var memberID, display, mapID, title, description, thumbnail, lat, lon, ratingCount 
     
    try{
        $(divID).innerHTML = ""  //clear the 'Searching...' text
        for(var i = 0; i < Tbl.rows.length; i++)
        {
            thumbnail = mbrPic(Tbl.rows[i].primaryPic);
            memberID = Tbl.rows[i].memberID
            display = Tbl.rows[i].display
            mapID = Tbl.rows[i].mapID
            lat = Tbl.rows[i].lat
            lon = Tbl.rows[i].lon
            ratingCount = Tbl.rows[i].ratingCount
            title = Tbl.rows[i].title
            description = Tbl.rows[i].description
            
            var prayerItem = createPrayerItem(divID, memberID, display, thumbnail, lat, lon, mapID, title, description, ratingCount)
            $(divID).appendChild(prayerItem)      
        }
        Nifty("div.rvwBlockFind", "small transparent");    
    }catch(err){alert(err.message)}
}   
 
function createPrayerItem(divID, memberID, display, thumbnail, lat, lon, mapID, title, description, ratingCount)  //html construction changes in this function should also be propagated to addCandleImageToPrayerList() right below
{
    var CGmapID = "PR"+mapID
    var reviewStr = ""
    
    divItem = document.createElement("div")
    divItem.className = "cttReviewFind"
    divItem.id = "prayer"+divID+CGmapID
    
    reviewStr += "<div class='mbrBit' id='mbrBit"+memberID+"'>"
        reviewStr += "<a class='mbrLink' href='javascript:viewProfile("+memberID+", \""+escape(display)+"\")'>"
        reviewStr += "<img class='mbrThumbnail' src='" + thumbnail + "'/><div>" + display + "</div>"
        reviewStr += "</a>"
    reviewStr += "</div>"
    reviewStr += "<div>"       
        reviewStr += "<div class='rvwBlockFind'>"
        reviewStr += "<div id='"+divID+CGmapID+"' class='rvwBlockHdr'>"
        reviewStr += "<a class='prayerLink' href='javascript:mapPrayerRequest(\""+CGmapID+"\", "+lat+", "+lon+")'>"                    
        //reviewStr += "<a class='prayerLink' href='javascript:getPrayerChain("+Tbl.rows[i].mapID+")'>"                    
        if ((ratingCount != 0) && (ratingCount != null)){
            //rating = Tbl.rows[i].ratingTotal/Tbl.rows[i].ratingCount;              
            //reviewStr += "<span id='rvwRating"+i+"' class='rvwRating'>"+createRating2(1, rating)+"</span>"
            reviewStr += "<img class='rvwBlockImg' src='icons/StarOn.gif'/>"
        } 
        reviewStr += "<span class='rvwTitle'>"+title+"</span>"
        reviewStr += "</a></div>"                    
        reviewStr += "<div class='rvwDesc'>"
        reviewStr += "<a class='prayerLink' href='javascript:mapPrayerRequest(\""+CGmapID+"\", "+lat+", "+lon+")'>"                                    
        //reviewStr += "<a class='prayerLink' href='javascript:getPrayerChain("+Tbl.rows[i].mapID+")'>"                    
        reviewStr += decHtmUpdate(description)
        reviewStr += "</a>"    
        reviewStr += "</div>"
        reviewStr += "</div>"
    reviewStr += "</div>"                     

    divItem.innerHTML = reviewStr
        
    return divItem
} 
   
function addCandleImageToPrayerList(id)   //this function is highly dependant of the prayer list html construction of createPrayerItem()
{   
       // add a candle to the prayer list item if there isn't one already
    var myTabber = $('tabberDivFind').tabber;
    var j = getTabberIndex(myTabber)     
    var prayerItem = "findRequests"+j+id  //this is how the id was constructed when the prayer list was built (see createPrayerList())
    if ($(prayerItem))
    {
        var foundImg = document.getElementById(prayerItem).getElementsByTagName("img")
        if (foundImg.length == 0) 
        {  
            var img = document.createElement("img");
            img.className = "rvwBlockImg"
            img.src = "icons/StarOn.gif"
            var aTag = document.getElementById(prayerItem).getElementsByTagName("a")[0]
            var spanTag = document.getElementById(prayerItem).getElementsByTagName("span")[0]
            aTag.insertBefore(img, spanTag)              
        }
    }
} 
    
function mapPrayerRequest(CGmapID, lat, lon)
{
    /*
    map.Clear()
    lat = relocateNearby(lat) //randomize the placement of the pin on Map
    lon = relocateNearby(lon)    
    addPin(CGmapID, lat, lon)
    map.SetZoomLevel(10);
    */
    
    //make sure item is visible on the map before popping the infobox
    var arr = getMapLimit()
    var myShape = getShapeByLinkID(CGmapID)    
    
    if (myShape) {
        //if (!((lat>arr[1])&&(lat<arr[0])&&(lon>arr[3])&&(lon<arr[2])))  //if item not whithin map limits  - VE bug: at high zoomin, the shape coordinates returned do not match what is seeing on the screen so changing criteria to whether we see the shape or not
        if (!(myShape._isDrawn))
        {
            var latlon = new VELatLong(lat, lon)
            CustomHideInfoBox(_currentShape) //make sure the infobox is closed
            map.PanToLatLong(latlon);           
            _currentShape = myShape     //store the current shape
            map.AttachEvent("onendpan", onendpanDisplayInfoBox)  //because the panning takes a while I need to display the box when the panning is over
            //map.AttachEvent("onchangeview", onchangeDisplayInfoBox)
            //displayInfoBox(_currentShape)  //this hides a bug where the infobox doesn't close when switching from a prayer to another not in the current view
        }
        else
        {
            displayInfoBox(myShape)
        }
    }
    else {  //if no pin on the map we add it first
        CustomHideInfoBox(_currentShape) //make sure the infobox is closed
        addPin(CGmapID, lat, lon, null)
        mapPrayerRequest(CGmapID, lat, lon)    //ATTENTION: recursive call
    }
}

function onendpanDisplayInfoBox(e)
{
    displayInfoBox(_currentShape);
    map.DetachEvent("onendpan", onendpanDisplayInfoBox) 
   
} 

function onchangeDisplayInfoBox(e)
{
    displayInfoBox(_currentShape);
    map.DetachEvent("onchangeview", onchangeDisplayInfoBox) 
   
} 
   
function spreadPins(places)   //takes an array of places (objects defined by lat and lon) and separate duplicate location by applying a random nearby relocating function
{
    for (i=0; i<places.length; i++)
    {
//        for (j=0; j<i; j++)
//        {
//            if ((places[i].lat == places[j].lat) && (places[i].lon == places[j].lon))
//            {
                places[i].lat = relocateNearby(places[i].lat)
                places[i].lon = relocateNearby(places[i].lon)
//                break;
//            }
//        }
    }
}   
    
    
function relocateNearby(nbr)
{
    return (nbr + 3*((Math.random()- Math.random())/100))    //adds a random number between -0.03 and 0.03
}

function toggleAllRequestsRadio()
{
    if (!$("findAllRequestRadio").checked)
    {
        $("findAllRequestRadio").checked = true;
        $("findLocalRequestRadio").checked = false;
        $("userLoc").value = "";
        $('userLocTyped').checked = false;
    }
}

function toggleLocalRequestsRadio()
{
    if (!$("findLocalRequestRadio").checked)
    {
        $("findAllRequestRadio").checked = false;
        $("findLocalRequestRadio").checked = true;
        $("userLoc").value = "Browse map or enter city, state";
        $('userLoc').className = "userLocClass"
        //$("userLoc").focus();
    }
}

function userTyped()
{
    $('userLoc').value="";
    $('userLoc').className = "inputText"
    $('userLocTyped').checked = true;

}

function fillMemberPane(resultTable)
{

    var str = ""
    // Add members to mbrBlock div
    for (var i=1; i < resultTable.rows.length; i++)  //the first row is not a member but the prayer request
    { 
        var id = resultTable.rows[i].id
        var lat = resultTable.rows[i].lat
        var lon = resultTable.rows[i].lon
        var pic = mbrPic(resultTable.rows[i].primaryPic)
        var display = resultTable.rows[i].display
        
        str += "<div class='mbrBlockDiv'>"
        str += "<a class='mbrLink' href='javascript:mapPrayerRequest("+id+", "+lat+", "+lon+")'>"
        str += "<img class='mbrPhoto' src='"+pic+"'/><span class='mbrDisplaySpan'>"+display+"</span>"
        str += "</a></div>"
    }    
    $("mbrBlock").innerHTML = str;

}

function mbrPic(primaryPic)
{
    //the thumbnail is has the same name as the primary pic except that it starts with "t" intead of "p"
    var thumbnail;
    if ((primaryPic != null) && (primaryPic != "") && (primaryPic != "undefined") && (primaryPic != "null"))  // the string "null" is actually valid and returned by the cookie
    {
        thumbnail = photoFolder+"/"+mbrFolder+"/t"+primaryPic.slice(1)
    }
    else
    {
        thumbnail = photoFolder+"/"+mbrDefaultThumbnail       
    }
    return thumbnail
}

function clearMbrPane()
{
    $("mbrBlock").innerHTML = "";
    $("mbrPane").style.display = "none";
}