﻿// JScript File

        var map;
       // var startMarker,endMarker;
       // var routeMarkers = [];
       // var currentLegID,currentLegIndex=0,usersCompleting;

        //var opacity = .5;
        //var lineWeight = 5;
        //var xmlRoute;
        var otherEventNodes;
        var offset=0,busyTimer,busyColor=1;busyColors=Array("#CC0099","#8F006B","#FFBFEF","#FF80DF");
        var photoNodes, photoOffset=0, comments, commentOffset, commentTimer;
        
        function loadMap() {
          if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(51.3,-2.9), 14);
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setMapType(G_NORMAL_MAP);
            loadRandomPhoto();
            //loadData();
          }
        }
        function scrollList(direction){
            offset+=direction;
            if (offset<0)offset=0;
            loadData();
        }
        function loadRandomPhoto(){
            GDownloadUrl("data/randomPhoto.aspx?x="+Math.random(), onLoadRandomPhoto);
        }
        function onLoadRandomPhoto(data, responseCode) {
            var photoNodes,xmlDoc,html,photoID;
                                                
            xmlDoc = GXml.parse(data);
            photoNodes = xmlDoc.documentElement.getElementsByTagName("photo");
	
	if (photoNodes==null || photoNodes.length==0) loadRandomPhoto();
	else {
		photoID=photoNodes[0].getAttribute("PHOPhotoID");
            html="random photo<br/><a target='none' href='photos/img"+photoID+"l.jpg'>";
            html+="<img src='photos/img"+photoID+"t.jpg' title='random hash photo'></a>";
            document.getElementById("randomPhoto").innerHTML=html;
            setTimeout("loadRandomPhoto()",10000);
	}
        }

          function loadData(){
            if (!mapLoaded){
                loadMap();
                mapLoaded=true;
                }
            
            hideCurrentChild();
            showBusy();
            GDownloadUrl("data/eventlist.aspx?history=2&hashruns=yes&offset="+offset+"&x="+Math.random(), onLoadRunList);
                       
          }
          function onLoadRunList(data, responseCode) {
            var runNodes,marker,lat,lng,caption,organiser,photoCount,routeCount,period,eventType,eventDate,eventNo;
            var runListHtml="", runHtml, eventID, qt=String.fromCharCode(34),ratingStars,attendanceCount;
            var xmlRuns = GXml.parse(data);
               
            runNodes = xmlRuns.documentElement.getElementsByTagName("event");
            
            map.clearOverlays();
            for (var i = 0; i < runNodes.length; i++) {
            
                caption = runNodes[i].getAttribute("CLCVenue");
                
                organiser=runNodes[i].getAttribute("EVTOrganiser");
                attendanceCount=parseInt(runNodes[i].getAttribute("CLCAttendanceCount"));
                lat = runNodes[i].getAttribute("CLCLatitude");
                lng = runNodes[i].getAttribute("CLCLongitude");
                
                photoCount =parseInt(runNodes[i].getAttribute("CLCPhotoCount"));
                routeCount=parseInt(runNodes[i].getAttribute("CLCRouteCount"));
                period=runNodes[i].getAttribute("CLCPeriod");
                //ratingStars=runNodes[i].getAttribute("CLCRatingStars");
                
                if (lat!="" && lng!=""){                   
                    point = new GLatLng(parseFloat(lat),parseFloat(lng));
                    marker=new GMarker(point,{title:caption});
                    map.addOverlay(marker);
                }
                
                eventID=runNodes[i].getAttribute("EVTEventID");
                eventType=runNodes[i].getAttribute("EVTType");
                runHtml="<div id='run"+eventID+"' ";
                runHtml+="class='"+period;
                if (eventType=="Hash")runHtml+="Hash";
                else runHtml+="Other";
                runHtml+="'>";

                runHtml+="<div class='dataLinks'>"
                    
                if (photoCount>0){
                    runHtml+="<a title='"+photoCount+" photos' href="+qt+"javascript:expandDiv('"+eventID+"','photos');"+qt+"><img src='images/photos.gif'></a> ";
                }

                /*if (routeCount>0){
                    runHtml+="<a title='replay this hash - "+routeCount+" track(s)' href='routeplayer/routeplayer.aspx?id="+eventID+"' target='none'><img src='images/play.gif'></a> ";
                }*/
                if (lat!="" && lng!=""){
                    runHtml+="<a href="+qt+"javascript:expandDiv('"+eventID+"','map');"
                    runHtml+="centreMap("+runNodes[i].getAttribute("CLCLatitude")+","+runNodes[i].getAttribute("CLCLongitude")+");"+qt+">"
                    runHtml+="<img title='See a map' src='images/map.gif'></a>";
                }
                if (attendanceCount>0){
                    runHtml+="<br/><a href="+qt+"javascript:expandDiv('"+eventID+"','attend');"+qt+">"+attendanceCount;
                    runHtml+=" <img src='images/colouredBar.png' width='"+(100-attendanceCount)+"' height='1' title='"+attendanceCount+" runners'>";
                    runHtml+="<img src='images/colouredBar.png' width='"+attendanceCount+"' height='8' title='"+attendanceCount+" runners'></a>";
                }
                runHtml+="</div>"
                runHtml+="<div class='eventDetails'>"
                eventDate=runNodes[i].getAttribute("EVTDate");
                runHtml+="<span class='dataDate'>"+eventDate+"</span>";
                runHtml+="<span id='run"+eventID+"Title' class='dataVenue'>"+runNodes[i].getAttribute("CLCVenue")+"</span>";
                
                runHtml+="<br/><span class='"+ eventType.replace(" ","")+"'>"+eventType;
                eventNo=runNodes[i].getAttribute("EVTEventNo");
                if (eventNo!="" && eventType=="Hash")runHtml+=" "+eventNo;
                runHtml+="</span>";
                if (runNodes[i].getAttribute("EVTDescription")!=null){
                    runHtml+=" <span class='dataDescription'>"+runNodes[i].getAttribute("EVTDescription")+"</span>";
                }
                if (organiser!="") runHtml+=" <span class='dataOrganiser'>"+organiser+"</span>";
                if (runNodes[i].getAttribute("EVTDetails")!=""){
                    runHtml+=" <span class='dataMoreDetails'><a href="+qt+"javascript:expandDiv('"+eventID+"','details');"+qt+">more details...</a></span>";
                }
                runHtml+="</div>";
                
                runHtml+="<div class='container' id='container"+eventID+"'></div></div>";
                runListHtml=runHtml+runListHtml;
            }
            
            //Add other event map markers
            if (otherEventNodes!=null){
                for (var i = 0; i < otherEventNodes.length; i++) {
                    caption = otherEventNodes[i].getAttribute("CLCVenue");
                    lat = otherEventNodes[i].getAttribute("CLCLatitude");
                    lng = otherEventNodes[i].getAttribute("CLCLongitude");
                    if (lat!="" && lng!=""){                   
                        point = new GLatLng(parseFloat(lat),parseFloat(lng));
                        marker=new GMarker(point,{title:caption});
                        map.addOverlay(marker);
                    }
                }
            }
            runListHtml="<div class='scrollArrow'><a href='javascript:scrollList(5);'><img src='images/upArrowSmall.png'></a></div>"+runListHtml;
            if (offset>0) runListHtml+="<div class='scrollArrow'><a href='javascript:scrollList(-5);'><img src='images/downArrowSmall.png'></a></div>";
            document.getElementById("runList").innerHTML=runListHtml;
            GDownloadUrl("data/eventlist.aspx?history=0&hashruns=no&x="+Math.random(), onLoadOtherEvents); 
          }
          function onLoadOtherEvents(data, responseCode) {
            var xmlData,venue,organiser,eventType,eventDate,description;
            var html="",eventID, qt=String.fromCharCode(34),lat,lng;
                                        
            xmlData = GXml.parse(data);
            otherEventNodes = xmlData.documentElement.getElementsByTagName("event");
            
            for (var i=otherEventNodes.length-1;i>-1 ;i--) {
                venue = otherEventNodes[i].getAttribute("CLCVenue");
                organiser=otherEventNodes[i].getAttribute("EVTOrganiser");
                eventID=otherEventNodes[i].getAttribute("EVTEventID");
                eventType=otherEventNodes[i].getAttribute("EVTType");
                eventDate=otherEventNodes[i].getAttribute("EVTDate");
                description=otherEventNodes[i].getAttribute("EVTDescription");
                lat = otherEventNodes[i].getAttribute("CLCLatitude");
                lng = otherEventNodes[i].getAttribute("CLCLongitude");
               
                html+="<div class='otherEvent' id='run"+eventID+"'>";
                if (lat!="" && lng!=""){
                    html+="<a href="+qt+"javascript:expandDiv('"+eventID+"','map');"
                    html+="centreMap("+lat+","+lng+");"+qt+">"
                    html+="<img title='See a map' align='right' src='images/map.gif'></a>";
                }
                html+="<span class='"+ eventType.replace(" ","")+"'>"+eventType+"</span><hr/>";
                
                if (description!="")html+="<span class='otherEventTitle'>"+description+"</span><br/>";
                html+="<span class='otherEventDetails'>"+eventDate+"</span><br/>";
                html+="<span class='otherEventDetails'>"+venue+"</span>";
                if (otherEventNodes[i].getAttribute("EVTDetails")!=""){
                    html+="<hr/><span class='otherEventDetails'><a href="+qt+"javascript:expandDiv('"+eventID+"','details');"+qt+">more details...</a></span>";
                }
                html+="</div>";
            }
            if (html=="")document.getElementById("otherEvents").style.visibility="hidden";
            else {
                document.getElementById("otherEvents").style.visibility="visible";
                html="Other Events<br/>"+html+"";
                document.getElementById("otherEvents").innerHTML=html;
            }
          }          
          function centreMap(lat,lng){
            var centrePoint=new GLatLng(lat,lng);
            map.panTo(centrePoint);
          }

        var idToExpand, currentExpandedID=null, currentChildID=null, mapLoaded=false, currentEventID=null;
        var ratingLabels=["","bad","poor","ok","good","perfect"];
        var ratingValues=Array(5);
        function expandDiv(eventID, childID){
            var prevDivID=currentExpandedID, prevChildID=currentChildID;
            var divIDToShow="run"+eventID, parentID="container"+eventID;
            
            currentEventID=eventID;
            hideCurrentChild();
            hideCurrentDiv();
                        
            if (divIDToShow!=prevDivID || childID!=prevChildID){
                showDiv(divIDToShow);
                showChild(parentID,childID);
            }
        }
        function showDiv(divID){
            var div=document.getElementById(divID);
            currentExpandedID=divID;
            
            if (!mapLoaded){
                loadMap();
                mapLoaded=true;
                }
        }
        function loadDetails(){
            GDownloadUrl("data/event.aspx?eventID="+currentEventID+"&x="+Math.random(), onLoadDetails);
        }
        function onLoadDetails(data,response){
            var xmlDoc= GXml.parse(data);
            var detailsDiv=document.getElementById("details");
            var eventNodes=xmlDoc.documentElement.getElementsByTagName("event");
            detailsDiv.innerHTML=eventNodes[0].getAttribute("EVTDetails")+"<br/><small><a href='javascript:hideCurrentChild()'>close details</a></small>";
        }
        function hideCurrentDiv(){
            if (currentExpandedID!=null){
                var div=document.getElementById(currentExpandedID);
                currentExpandedID=null;
            }
            if (commentTimer!=null)clearTimeout(commentTimer);
        }
        function showChild(parentID,childID){
            var childDiv=document.getElementById(childID);
            var parentDiv=document.getElementById(parentID);
            
            childDiv.style.visibility="visible";
            if(parentDiv==null)parentDiv=document.getElementById("floater");
            parentDiv.appendChild(childDiv);
            
            currentChildID=childID;
            if (childID=="map" || childID=="attend") childDiv.style.height="300px";
            else childDiv.style.height="auto";
            
            if (childID=="rate") loadRating();
            if (childID=="photos") loadPhotos();
            if (childID=="stars") loadStars();
            if (childID=="attend") loadAttend();
            if (childID=="details") loadDetails();
        }
        function hideCurrentChild(){
            var childDiv;
            if (currentChildID!=null){
                childDiv=document.getElementById(currentChildID);
                childDiv.style.visibility="hidden";
                document.getElementById("storage").appendChild(childDiv);
            }
            currentChildID=null;
        }
//        function loadRating(){
//            var x;
//            
//            for (x=0;x<4;x++){
//                ratingValues[x]=-1;
//            }
//            GDownloadUrl("data/eventRating.aspx?eventID="+currentEventID+"&x="+Math.random(), onLoadRating);
//        }
//        function loadStars(){
//            GDownloadUrl("data/eventStars.aspx?eventID="+currentEventID+"&x="+Math.random(), onLoadStars);
//        }
        function loadAttend(){
            GDownloadUrl("data/eventAttendance.aspx?eventID="+currentEventID+"&x="+Math.random(), onLoadAttend);
        }
//        function onLoadRating(data,response){
//            var ratingDiv=document.getElementById("rate");
//            ratingDiv.innerHTML=data;            
//        }
//        function onLoadStars(data,response){
//            var xmlDoc= GXml.parse(data),html="",i;
//            var scoreNodes = xmlDoc.documentElement.getElementsByTagName("rating");
//            var commentNodes = xmlDoc.documentElement.getElementsByTagName("rating2");
//            var starsDiv=document.getElementById("stars"), ratingCount;
//            
//            if (scoreNodes.length>0){
//                ratingCount=scoreNodes[0].getAttribute("CLCRatingCount");
//                if (ratingCount>1)html+=ratingCount+" people have rated this event, these are their average scores:";
//                else html+="1 person has rated this event, these are their scores:";
//                html+="<ul>";
//                for (i=0;i<scoreNodes.length;i++){
//                    html+="<li>"+scoreNodes[i].getAttribute("RDTDescription")+": ";
//                    html+="<img src='images/stars"+scoreNodes[i].getAttribute("CLCRatingAverage")+".png'></li>";
//                }
//                html+="</ul>";
//            }
//            clearTimeout(commentTimer);
//            if (commentNodes.length>0){
//                commentOffset=0;
//                comments="";
//                for (i=0;i<commentNodes.length;i++){
//                    comments+=commentNodes[i].getAttribute("RATComment");
//                    comments+="... ";
//                }
//                if (comments.length>50){
//                    commentTimer=setTimeout("showComment();",2000);
//                    html+="Comments: <span id='comment'>"+comments.substr(0,80)+"</span>";
//                    comments+=".....    "
//                }else html+="Comments: <span id='comment'>"+comments+"</span>";;
//            }
//            starsDiv.innerHTML=html;
//        }
//        function showComment(){
//            var i,commentIndex=commentOffset,commentText=comments+comments;
//            
//            document.getElementById("comment").innerHTML=commentText.substr(commentOffset,80);
//            commentOffset++;
//            if (commentOffset>=comments.length){
//                commentOffset=0;
//                commentTimer=setTimeout("showComment();",3000);
//            }else commentTimer=setTimeout("showComment();",100);
//        }
//        function saveRating(){
//            var ratingComment=document.getElementById("ratingComment"),i,x,saveUrl="http://www.mendiph4.org.uk/data/saveRating.aspx?";
//            
//            for (x=0;x<4;x++){
//                saveUrl+=x+"="+ratingValues[x]+"&";
//            }
//            saveUrl+="comment="+escape(ratingComment.value);
//            saveUrl+="&eventID="+currentEventID;
//            GDownloadUrl(saveUrl, loadData);
//        }
        function loadPhotos(){
            document.getElementById("photos").innerHTML="";
            GDownloadUrl("data/photothumbnails.aspx?eventid=" + currentEventID+"&x="+Math.random(), onLoadPhotos);
        }
        function showBusy(){
            document.getElementById("runList").innerHTML=document.getElementById("runList").innerHTML+"<div style='text-align:center'><img src='images/busy.gif'></div>";
        }
        function onLoadPhotos(data,response){
            var xmlDoc= GXml.parse(data);
            photoNodes = xmlDoc.documentElement.getElementsByTagName("photo");
            photoOffset=0;
            showPhotos();
        }
        function showPhotos(){
            var photosDiv=document.getElementById("photos");
            var html="",caption,imgUrl,i,photoID;

            if (photoOffset>0){
                html += "<span class='photoThumbnail'>";
                html+="<a href='javascript:scrollPhotos(-1);'><img src='images/leftArrowSmall.png'></a>";
                html += "</span>";
            }
            for (i=photoOffset; i<photoNodes.length && i-photoOffset<3; i++) {
                caption = photoNodes[i].getAttribute("PHOCaption");
                photoID=photoNodes[i].getAttribute("PHOPhotoID")
                html += "<span class='photoThumbnail'>";
                html += "<a href='eventPhotos.aspx?event="+currentEventID+"&photo="+i+"' target='none'>";
                html += "<img src='photos/img"+photoID+"s.jpg' ";
                html += "title='"+caption+"'></a>";
                html += "</span>";
            }
            if (photoNodes.length-photoOffset>3){
                html += "<span class='photoThumbnail'>";
                html+="<a href='javascript:scrollPhotos(1);'><img src='images/rightArrowSmall.png'></a>";
                html += "</span>";
            }
            html += "";
            photosDiv.innerHTML=html;
        }
        function scrollPhotos(direction){
            photoOffset+=direction;
            showPhotos();
        }
        function setStar(rating,val){
            var i, src;
            
            if (val==-1) val=ratingValues[rating];
            for (i=0;i<5;i++){
                id=rating +""+ i;
                src="images/star";
                if (i<=val)src+="1.png";
                else src+="0.png";
                
                document.getElementById("star"+id).src=src;
                //alert(id);
            }
            document.getElementById("rate"+rating).innerHTML=ratingLabels[val+1];
        }       
        function rateIt(rating,val){
            ratingValues[rating]=val;
        }
        function onLoadAttend(data,response){
            var xmlDoc= GXml.parse(data),html="<ul>",i;
            var attendNodes = xmlDoc.documentElement.getElementsByTagName("attend");
            var attendDiv=document.getElementById("attend");
            
            for (i=0;i<attendNodes.length;i++){
                html+="<li";
                if (attendNodes[i].getAttribute("EATOrganiser")=="True")html+=" class='hare'";
                html+=">"+attendNodes[i].getAttribute("ATTForeName")+" "+attendNodes[i].getAttribute("ATTSurname");
                html+="</li>";
            }
            html+="</ul>";
        
            attendDiv.innerHTML=html;
        }
