﻿// JScript File

    var map = null;
    var marker;
    var last_result;
    
    var topStations = ["","","","","","","","","","","","","","","","","","","",""];    
    var havetop = false;
    
    var LastSongDetails = "";
    var LastStatDetails = "";    
    var LastSongDetailsFull = "";
    var LastStatDetailsFull = "";    
    var LastTopListenedDetails = "";
    var LastTopStreamedDetails = "";
    
    var resizetoggle = false;
    
    var iconRC = new GIcon(); 
    iconRC.image = 'images/15x15_black.png';
    iconRC.iconSize = new GSize(15, 15);
    iconRC.iconAnchor = new GPoint(8, 14);
    iconRC.infoWindowAnchor = new GPoint(14, 1);

    var iconRCw = new GIcon(); 
    iconRCw.image = 'images/15x15_grey.png';
    iconRCw.iconSize = new GSize(15, 15);
    iconRCw.iconAnchor = new GPoint(8, 14);
    iconRCw.infoWindowAnchor = new GPoint(14, 1);

    var iconRCTiny = new GIcon(); 
    iconRCTiny.image = 'images/7x7.png';
    iconRCTiny.iconSize = new GSize(7, 7);
    iconRCTiny.iconAnchor = new GPoint(4, 6);
    iconRCTiny.infoWindowAnchor = new GPoint(6, 1);
    
    var existLon = new Array();
    var existLat = new Array();
    var existHtml = new Array();
    var existMarker = new Array();
    var timeLeft = new Array();
    var found = new Array();
    
    var currentMode = "WORLD";
    var currentScreenMode = "NORMALSIZE";
    
    var worldstart = new GLatLng(20, 12.8333);
    var worldzoom = 2;
    var usstart = new GLatLng(38.272689, -93.076172);
    var uszoom = 4;
    var canadastart = new GLatLng(56.130366, -106.346771); 
    var canadazoom = 4;
    var europestart = new GLatLng(50.51342652633956, 20.56640625); 
    var europezoom = 4;
    var latamstart = new GLatLng(-21.616579336740593, -59.0625);
    var latamzoom = 3;
    var asiastart = new GLatLng(34.047863, 100.6196553);
    var asiazoom = 3;
    var oceaneastart = new GLatLng(-22.75592068148639, 144.140625);
    var oceaneazoom = 3;

    var OktoActivity = 1;
    var OkToNewActivity = 1;
    var OKtoStationAndSong = 1;

    var lastActivityID = "0";

    var mainTimerID = 0;
    
    var elements = new Array();
    var elementTime = 2000;
    var activityMarker = null;
    var activityIndex = 0;
    var maxActivity = 3;
    var elementTimerID = 0;
    var okToMarker = false;
    var minTime = 1000;
    var okToChangeMarker = true;
    var speed = 1;
    
    var qstep;
    
    var debug = false;
    
    var active_mode = "songs";
        
    function changeTab(name) {
        document.getElementById("Songs").style.visibility = "hidden";
        document.getElementById("Stations").style.visibility = "hidden";
        document.getElementById("Activity").style.visibility = "hidden";
        document.getElementById("Songs").style.display = "none";
        document.getElementById("Stations").style.display = "none";
        document.getElementById("Activity").style.display = "none";
        document.getElementById("Songs-bar").style.visibility = "hidden";
        document.getElementById("Stations-bar").style.visibility = "hidden";
        document.getElementById("Activity-bar").style.visibility = "hidden";
        document.getElementById(name).style.visibility = "visible";
        document.getElementById(name).style.display = "inline";
        document.getElementById(name + "-bar").style.visibility = "visible";
    }
    
    function load()
    {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(worldstart, worldzoom);
        map.addControl(new GLargeMapControl());
	    GEvent.addListener(map, "zoomend", 
	        function(oldZoomLevel, newZoomLevel) {
	             zoom_changed(oldZoomLevel, newZoomLevel);
            });         
        
        timerClick();
        ElementTimerTick();
        //slowTimerClick();
        //getConstantInfo();
        
        
        if (window.attachEvent) {
            window.attachEvent("onresize",
                function() {myResize()});
        } else { 
            window.addEventListener("resize",
                function() {myResize()}, false);
        }
        
        changeTab('Activity');
        document.getElementById("pagetabs").style.visibility = "visible";
        mouseTabsEvent('out', 'songs');
        mouseTabsEvent('out', 'stations');        
      
    }
    
    function zoom_changed(oldZoomLevel, newZoomLevel)
    {
        if (((oldZoomLevel < 3) && (newZoomLevel >= 3)) ||
             ((oldZoomLevel >= 3) && (newZoomLevel < 3))
             )
        {
            var icon = iconRCTiny;
            if (newZoomLevel >= 3)
            {
                icon = iconRC;
            }
            for (i = 0; i < existMarker.length; i++) {
                map.removeOverlay(existMarker[i]);
                existMarker[i] = GetNewMarker(existLat[i], existLon[i], existHtml[i], 0);
                map.addOverlay(existMarker[i]);
            }
        }
    }

    function change_map_mode(new_node) {
   
        var currzoom = map.getZoom();
        currentMode = new_node;
        var addzoom = 0;
        if (currentScreenMode == "FULLPAGE")
        {
            addzoom = 1;
        }
        if (new_node == "WORLD") {
            map.setCenter(worldstart, worldzoom + addzoom);
        } else if (new_node == "US") {
            map.setCenter(usstart, uszoom + addzoom);
        } else if (new_node == "CANADA") {
            map.setCenter(canadastart, canadazoom + addzoom);
        } else if (new_node == "EUROPE") {
            map.setCenter(europestart, europezoom + addzoom);
        } else if (new_node == "LATAM") {
            map.setCenter(latamstart, latamzoom + addzoom);
        } else if (new_node == "ASIA") {
            map.setCenter(asiastart, asiazoom + addzoom);
        } else if (new_node == "OCEANEA") {
            map.setCenter(oceaneastart, oceaneazoom + addzoom);
        }
        //zoom_changed();
        
    }
    
    
    function findPosX(obj)
    {
        var curleft = 0;
        if(obj.offsetParent)
            while(1) 
            {
              curleft += obj.offsetLeft;
              if(!obj.offsetParent)
                break;
              obj = obj.offsetParent;
            }
        else if(obj.x)
            curleft += obj.x;
        return curleft;
    }

    function findPosY(obj)
    {
        var curtop = 0;
        if(obj.offsetParent)
            while(1)
            {
              curtop += obj.offsetTop;
              if(!obj.offsetParent)
                break;
              obj = obj.offsetParent;
            }
        else if(obj.y)
            curtop += obj.y;
        return curtop;
    }
    
    function mouseTabsEvent(action, name) {
        var linkcont = document.getElementById("top-" + name);
        if (action == 'over') {
            if ((linkcont != null) && (name != active_mode)) {
                linkcont.style.background = "url(SiteImages/top" + name + "Hoover2.png)";
            }
        } else if (action == 'out') {
            if (linkcont != null) {
                if (name == active_mode) {
                    linkcont.style.background = "url(SiteImages/top" + name + "2.png)";
                } else {
                    linkcont.style.background = "url(SiteImages/top" + name + "Black2.png)";
                }
            }
        }
    }
    
    function active_change(changed_to) 
    {
        active_mode = changed_to;
        if (active_mode == "songs") {
            document.getElementById("active-region").innerHTML = LastSongDetailsFull;
        } else {
            document.getElementById("active-region").innerHTML = LastStatDetailsFull;
        }
        mouseTabsEvent('out', 'songs');
        mouseTabsEvent('out', 'stations');
    }
        
    function change_mode(mode)
    {
        if (mode == "STOP")
        {
            okToChangeMarker = false;
        } else if (mode == "START")
        {
            okToChangeMarker = true;
        } else if (mode == "FULLPAGE")
        {
            currentScreenMode = mode;
            var left = findPosX(document.getElementById("map"));
            var top = findPosY(document.getElementById("map")) - 30;
            var myWidth = 0, myHeight = 0;
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
            if (myHeight > 0) {        
                document.getElementById("map").style.height = myHeight + "px";
            }
            if (myWidth > 0)
            {
                document.getElementById("map").style.width = myWidth + "px";
            }
            
            if( typeof( window.pageYOffset ) == 'number' ) {
                //Netscape compliant
                window.pageYOffset = top;
                window.pageXOffset = left;
            } 
            if( document.body && ( typeof( document.body.scrollLeft ) == 'number' ) ) {
                //DOM compliant
                document.body.scrollTop = top;
                document.body.scrollLeft = left;
            }
            if( document.documentElement && ( typeof( document.documentElement.scrollLeft ) == 'number' ) ) {
                //IE6 standards compliant mode
                document.documentElement.scrollTop = top;
                document.documentElement.scrollLeft = left;
            }
            change_map_mode(currentMode);
            
            var blackberry = document.getElementById("blackberry");
            blackberry.style.visibility = "visible";
            blackberry.style.left = (myWidth - 400) + "px";
            blackberry.style.top = (top - 20) + "px";
            blackberry.style.width = 400 + "px";
            var screenshot = document.getElementById("ScreenShot");
            screenshot.style.left = 40;
            
            var maintabs = document.getElementById("maintabs");
            maintabs.style.visibility = "visible";
            maintabs.style.left = (myWidth - 340) + "px";
            maintabs.style.top = (top + 360) + "px";
            
        } else if (mode == "NORMALSIZE")
        {
            currentScreenMode = mode;
            document.getElementById("map").style.height = 500 + "px";
            document.getElementById("map").style.width = 930+ "px";
            if( typeof( window.pageYOffset ) == 'number' ) {
                //Netscape compliant
                window.pageYOffset = 0;
                window.pageXOffset = 0;
            } 
            if( document.body && ( typeof( document.body.scrollLeft ) == 'number' ) ) {
                //DOM compliant
                document.body.scrollTop = 0;
                document.body.scrollLeft = 0;
            }
            if( document.documentElement && ( typeof( document.documentElement.scrollLeft ) == 'number' ) ) {
                //IE6 standards compliant mode
                document.documentElement.scrollTop = 0;
                document.documentElement.scrollLeft = 0;
            }            
            change_map_mode(currentMode);
            document.getElementById("blackberry").style.visibility = "hidden";
            document.getElementById("maintabs").style.visibility = "hidden";
        }
    }

    function myResize()
    {
        var map = document.getElementById("map");  
        
        if (resizetoggle) {
            map.style.left = "0px";
            resizetoggle = false;
        } else {
            map.style.left = "1px";
            resizetoggle = true;
        }
        
    }

    function timerClick()
    {
    
        if (mainTimerID != 0)
        {
            clearTimeout(mainTimerID);
        }
    
        OktoActivity--;
        if (OktoActivity <= 0) 
        {
            OktoActivity = 6; //if it fails - it tries in 120 seconds
            PageMethods.GetLatestActivity("all", OnActivityCompleted, OnActivityFailed);
        }
        OkToNewActivity--;
        if (OkToNewActivity <= 0) 
        {
            OkToNewActivity = 3; //if it fails - it tries in 30 seconds
            PageMethods.GetNewLatestActivity(lastActivityID, OnNewActivityCompleted, OnNewActivityFailed);
        }
        OKtoStationAndSong--;
        if (OKtoStationAndSong <= 0) 
        {
            OKtoStationAndSong = 3; //if it fails - it tries in 30 seconds
            PageMethods.GetLatestStationAndSongActivity("test", OnStationAndSongActivityCompleted, OnStationAndSongActivityFailed);
        }
        
        mainTimerID = setTimeout("timerClick()", 10000);
        
    }
    
    /*
    function slowTimerClick()
    {
        PageMethods.GetTopStations("test", OnTopStationsCompleted, OnActivityFailed);
    }*/
    
    /*
    function getConstantInfo()
    {
        GetTopList();
    }*/
    /*
    function GetTopList()
    {
        var index = document.getElementById("ctl00_ContentPlaceHolder1_SelectTopList").selectedIndex;
        var station = document.getElementById("ctl00_ContentPlaceHolder1_SelectTopList")[index].text;
    
        PageMethods.GetTopSongsOfStation(station, OnTopSongsCompleted, OnActivityFailed);
    }*/
    
    function showDetails(index)
    {
        alert(index);
    }

    function GetNewMarker(lat, lng, name, oldIcon)
    {
        var marker;
        var zoomLevel = map.getZoom();
        if (zoomLevel >= 3)
        {
            marker = new GMarker(new GLatLng(lat, lng), {icon:iconRC});
        } else
        {
            marker = new GMarker(new GLatLng(lat, lng), {icon:iconRCTiny});
        }
        
        GEvent.addListener(marker, "click", 
            function() {
                marker.openInfoWindowHtml("<img src='images/rcicon.png' />  " + name);
            }
        );
        return marker;
        
    }
    
    function ElementTimerTick()
    {
        if (elementTimerID != 0)
        {
            clearTimeout(elementTimerID);
        }
        if (okToMarker && (elements.length > 0))
        {
            if (okToChangeMarker)
            {
                if (activityMarker != null)
                {
                    map.removeOverlay(activityMarker);
                }
                var tokens = elements[0].split(";");
                var lat;
                var lon;
                var html;
                var goodone = false;
                if ((tokens[0] == "SP") && (tokens.length == 9))
                {
                    lat = tokens[5];
                    lon = tokens[6];
                    activityMarker = new GMarker(new GLatLng(lat, lon), {icon:iconRC});
                    map.addOverlay(activityMarker);
                    html = spellPlayEvent(tokens);
                    activityMarker.openInfoWindowHtml(html);
                    goodone = true;
                } else if ((tokens[0] == "CL") && (tokens.length == 6))
                {
                    lat = tokens[1];
                    lon = tokens[2];
                    activityMarker = new GMarker(new GLatLng(lat, lon), {icon:iconRC});
                    map.addOverlay(activityMarker);
                    html = spellNewClient(tokens);
                    activityMarker.openInfoWindowHtml(html);
                    goodone = true;
                } else if ((tokens[0] == "SF") && (tokens.length == 9))
                {
                    lat = tokens[6];
                    lon = tokens[7];
                    activityMarker = new GMarker(new GLatLng(lat, lon), {icon:iconRC});
                    map.addOverlay(activityMarker);
                    html = spellSongFulfillment(tokens);
                    activityMarker.openInfoWindowHtml(html);
                    goodone = true;
               }
               
               if (goodone)
               {
                   var wasfound = false;
                   for (i = 0; i < existMarker.length && !wasfound; i++) {
                       if ((existLat[i] == lat) && (existLon[i] == lon)) {
                            wasfound = true;
                        }
                    }
                    if (!wasfound) {
                        var l = existMarker.length;
                        existMarker[l] = GetNewMarker(lat, lon, html, 0);
                        existLat[l] = lat;
                        existLon[l] = lon;
                        existHtml[l] = html;
                        found[l] = true;
                        timeLeft[l] = 360;
                        map.addOverlay(existMarker[l]);
                    }
                }
                var toremove = qstep;
                if (toremove > elements.length)
                {
                    toremove = elements.length;
                }
                elements.splice(0, toremove);
            }
        }
        DebugMessage(elements.length + " elements. " + existMarker.length + " markers.");
    
        elementTimerID = setTimeout("ElementTimerTick()", elementTime);
    }
    
    function DebugMessage(text)
    {
        if (debug)
        {
            document.getElementById("debugmsg").innerHTML = text;
        }
    }
    
    function spellPlayEvent(tokens)
    {
        var output = "<table style='text-align:left'><tr valign='top'><td><img src='SiteImages/Listen.png' /></td><td><b>" + tokens[3] + " " + tokens[2] + "</b><br />";
        if (tokens[4] != "")
        {
            output += tokens[4] + "<br />";
        }
        output += tokens[7] + "</td>";
        output += "<td><img src='StationImage.ashx?StationID=" + tokens[8] + "&Size=Large' height='60px' width='60px' /></td></tr></table>";
        return output;
    }
    function spellNewClient(tokens)
    {
        var output = "<table style='text-align:left'><tr valign='middle'><td><img src='Images/NobexLogo60.png' /></td><td><b>Launched</b><br />";
        output += tokens[3] + "</td>";
        if (tokens[5] != "")
        {
            output += "<td><img style='width:47px' src='" + tokens[5] + "' /></td>";
        }
        if (tokens[4] != "")
        {
            output += "<td><img style='height:50px' src='" + tokens[4] + "' /></td>";
        }
        output += "</tr></table>";
        return output;
    }
    function spellSongFulfillment(tokens)
    {
        var output = "<table style='text-align:left'><tr valign='top'><td><img src='" + tokens[1] + "' /></td><td><b>" + tokens[4] + " " + tokens[3] + "</b><br />";
        if (tokens[5] != "")
        {
            output += tokens[5] + "<br />";
        }
        output += tokens[8] + "</td></td></table>";
        return output;
    }
    function spellStations(stationlist)
    {
        var stations = stationlist.split("$");    
        var output = "<table style='text-align:left'>";
        for (i = 0; i < stations.length; i++)
        {
            var tokens = stations[i].split("~");
            if (tokens.length == 2)
            {
                output += "<tr><td>" + tokens[0] + "</td><td>" + tokens[1] + "</td></tr>";
            }
        }
        output += "</table>";
        return output;
    }

    function OnNewActivityCompleted(result, context, methodname) 
    {
    
        if (result == "error")
        {
            document.getElementById("waiting").style.visibility = "hidden";
            document.getElementById("waiting").style.display = "none";   
            DebugMessage("new activity failed");
            OkToNewActivity = 3; //will try in 30 seconds
            return;
        }            
        okToMarker = false;
        document.getElementById("waiting").style.visibility = "hidden";
        document.getElementById("waiting").style.display = "none";  
        var arrayElements = result.split("|");
        DebugMessage("got new batch of " + arrayElements.length);
        
        lastActivityID = arrayElements[0];
        var nexists = elements.length;
        for (i = 0; i < arrayElements.length - 2; i++)
        {
            elements[nexists + i] = arrayElements[i + 1];
        }
        
        if (elements.length > 500)
        {
            var toremove = elements.length - 500;
            elements.splice(0, toremove);
        }

        elementTime = Math.round((10000 + 3000) / elements.length);
        if (elementTime < minTime)
        {
            qstep = Math.round(minTime / elementTime);
            elementTime = minTime;
        }
        else
        {
            qstep = 1;
        }
        if (qstep > 1)
        {
            document.getElementById('SpeedText').innerHTML = "Showing 1 out of every " + qstep;
        }
        else
        {
            document.getElementById('SpeedText').innerHTML = "";
        }
        
        
        okToMarker = true;
        OkToNewActivity = 1; //will try in 10 seconds
    }      
    
    function OnNewActivityFailed(err, context, methodname)
    {
        document.getElementById("waiting").style.visibility = "hidden";
        document.getElementById("waiting").style.display = "none";   
        DebugMessage("new activity failed");
        OkToNewActivity = 3; //will try in 30 seconds
    }
    
    function OnActivityCompleted(result, context, methodname) 
    {
        document.getElementById("waiting").style.visibility = "hidden";
        document.getElementById("waiting").style.display = "none";        
        last_result = result;
        var arraymarkers = result.split("|");

        var nitems = arraymarkers.length;
        
        for (i = 0; i < existMarker.length; i++) {
            found[i] = false;
        }
        
        for (var count = 0; count < nitems; count++) {    
            var wasfound = false;
            var stationdetails = arraymarkers[count].split(";");
            var stationlat = "";
            var stationlon = "";
            var stationhtml = "";
            var stationlist = "";
            var stationmode = "";
            if (stationdetails.length == 5) {
                stationlat = stationdetails[0];
                stationlon = stationdetails[1];
                stationhtml = stationdetails[2];
                stationlist = stationdetails[3];
                stationmode = stationdetails[4];
                stationhtml += spellStations(stationlist);
                for (i = 0; i < existMarker.length && !wasfound; i++) {
                    if ((existLat[i] == stationlat) && (existLon[i] == stationlon) && (existHtml[i] == stationhtml)) 
                    {
                        found[i] = true;
                        timeLeft[i]++;
                        wasfound = true;
                    }
                }
                if (!wasfound) {
                    var l = existMarker.length;
                    existMarker[l] = GetNewMarker(stationlat, stationlon, stationhtml, stationmode - 0);
                    existLat[l] = stationlat;
                    existLon[l] = stationlon;
                    existHtml[l] = stationhtml;
                    found[l] = true;
                    timeLeft[l] = 1;
                    map.addOverlay(existMarker[l]);
                }
            }
        }
        
        
        for (i = existMarker.length - 1; i >= 0; i--) {
            if (!found[i]) {
                timeLeft[i]--;
                if (timeLeft[i] <= 0)
                {
                    map.removeOverlay(existMarker[i]);
                    existLat.splice(i, 1);
                    existLon.splice(i, 1);
                    existHtml.splice(i, 1);
                    found.splice(i, 1);
                    timeLeft.splice(i, 1);
                    existMarker.splice(i, 1);
                }
            }
        }
        if (existMarker.length > 1000)
        {
            alert('Please refresh the page');
        }
        
        OktoActivity = 6; //will do again in 60 seconds
    }
    
    /*
    function OnTopStationsCompleted(result, context, methodname)
    {
        var arraystations = result.split("|");
               
        var nstat = arraystations[0] - 0;
        var p = 1;
        for (i = 0; i < 2; i++) 
        {
            var out = "<table cellspacing='4px' >";
            var mcols = 2;            
            var ncol = 0;        
            for (j = 0; j < nstat; j++, p++) 
            {
                var stationdetails = arraystations[p].split(";");
                if (stationdetails.length == 5) {
                    if (ncol == 0) {
                        out += "<tr>";
                    }         
                    var place = j + 1;
                    out += "<td><img style='width:75px;height:75px;border:0px' src='" + stationdetails[4] + "' /></td>";
                    out += "<td width=200>#" + place + "<br /><b>" + stationdetails[1] + " " + stationdetails[0] + "</b><br />" +
                        stationdetails[2] + "</td>";
                    //outstat += "<td>" + statdetails[3] + "</td>";
                    ncol++;
                    if (ncol == mcols) {
                        ncol = 0;
                        out += "</tr>";
                    }
                }
            }
            out += "</table>";    
       
            if (i == 0) {
                if (LastTopListenedDetails != out) {
                    LastTopListenedDetails = out;
                    document.getElementById("TopListened").innerHTML = out;
                }
            }  
            else 
            {
            }
        }               
        setTimeout("slowTimerClick()", 60000);
    }*/
    
    function OnActivityFailed(err, context, methodname)
    {
        document.getElementById("waiting").style.visibility = "hidden";
        document.getElementById("waiting").style.display = "none";  
        DebugMessage("activity failed");
        OktoActivity = 12; //will do again in 120 seconds
    }
    
    function OnStationAndSongActivityCompleted(result, context, methodname)
    {
        var arraymarkers = result.split("|");

        var nfull = arraymarkers[0] - 0;
        var out = "<table cellspacing='4px' style='margin-left:auto;margin-right:auto;' >";
        var outfull = "<table cellspacing='2px' >";
        var mcols = 2;
        var ncol = 0;
        for (i = nfull - 1; i >= 0; i--) {
            var fullfillmentdetails = arraymarkers[1 + i].split(";");
            if (fullfillmentdetails.length == 7) {
                if (ncol == 0) {
                    out += "<tr>";
                }
                outfull += "<tr valign='middle'>";
                
                out += "<td><img style='height:100px; width:100px;' src='" + fullfillmentdetails[4] + "' /></td>";
                out += "<td width=200>";
                out += "<b>" + fullfillmentdetails[2] + "</b><br>" + 
                    fullfillmentdetails[3] + "<br>" + 
                    "Played on " + fullfillmentdetails[1] + " " + fullfillmentdetails[0] + "<br>" +
                    //"requested at " + fullfillmentdetails[6] + "<br>" + 
                    //"Get it from <a href='" + fullfillmentdetails[5] + "'><img src='images/iTunes.png' /></a>";
                    "Get it from <a href='" + fullfillmentdetails[5] + "'>iTunes</a>";
                out += "</td>";
                
                outfull += "<td><img style='height:50px; width:50px;' src='" + fullfillmentdetails[4] + "' /></td>";
                outfull += "<td>";
                outfull += "<b>" + fullfillmentdetails[2] + "</b><br>" +
                    fullfillmentdetails[3] + "<br>" +
                    "Played on " + fullfillmentdetails[1] + " " + fullfillmentdetails[0];
                outfull += "</td>";
                
                ncol++;
                if (ncol == mcols) {
                    ncol = 0;
                    out += "</tr>";
                }
                outfull += "</tr><tr><td colspan='2'><hr /></td></tr>";
            }
        }
        out += "</table>";
        outfull += "</table>";
        
        if (LastSongDetails != out) {
            LastSongDetails = out;
            LastSongDetailsFull = outfull;
            document.getElementById("SpanSongDetails").innerHTML = out;
            if (active_mode == "songs") {
                document.getElementById("active-region").innerHTML = outfull;
            }
        }
        
        var p = 1 + nfull;
        var nstat = arraymarkers[p] - 0;
        var outstat = "<table cellspacing='4px' style='margin-left:auto;margin-right:auto;' >";
        var outstatfull = "<table cellspacing='4px' >";
        var ncol = 0;        
        for (j = 0; j < nstat; j++) 
        {
            var statdetails = arraymarkers[p + 1 + j].split(";");
            if (statdetails.length == 5) {
                var direction = "same";
                if (havetop) {
                    //finding the previous location
                    direction = "up";
                    for (k = 0; k <= j && k < 20; k++) 
                    {
                        if (topStations[k] == statdetails[0]) 
                        {
                            if (k < j) {
                                direction = "down";
                            } else 
                            {
                                direction = "same";
                            }
                            k = 20;
                        }
                    }
                }
                if (ncol == 0) {
                    outstat += "<tr>";
                }         
                outstatfull += "<tr>";
                var place = j + 1;        
                outstat += "<td ><img style='width:75px;height:75px;border:0px' src='" + statdetails[4] + "' /></td>";
                outstat += "<td width=200>#" + place + "<br /><b>" + statdetails[1] + " " + statdetails[0] + "</b><br />" +
                    statdetails[2] + "</td>";
                //outstat += "<td>" + statdetails[3] + "</td>";
                outstatfull += "<td ><img style='width:50px;height:50x;border:0px' src='" + statdetails[4] + "' /></td>";
                outstatfull += "<td>#" + place + "<br /><b>" + statdetails[1] + " " + statdetails[0] + "</b><br />" +
                    statdetails[2] + "</td>";
                
                ncol++;
                if (ncol == mcols) {
                    ncol = 0;
                    outstat += "</tr>";
                }
                outstatfull += "</tr><tr><td colspan='2'><hr /></td></tr>";
            }
        }
        outstat += "</table>";    
        outstatfull += "</table>";    
       
        if (LastStatDetails != outstat) {
            LastStatDetails = outstat;
            LastStatDetailsFull = outstatfull;
            document.getElementById("TopStations").innerHTML = outstat;
            if (active_mode == "stations") {
                document.getElementById("active-region").innerHTML = outstatfull;
            }
        }
        //keeping the current ratings
        for (j = 0; j < nstat && j < 20; j++) 
        {
            var statdetails = arraymarkers[p + 1 + j].split(";");
            if (statdetails.length == 5) {
                topStations[j] = statdetails[0];
            }
        }   
        havetop = true; 
        OKtoStationAndSong = 1; //in 10 seconds
       
    }
    
    function OnStationAndSongActivityFailed(err, context, methodname)
    {
        document.getElementById("waiting").style.visibility = "hidden";
        document.getElementById("waiting").style.display = "none";  
        DebugMessage("activity failed");
        OKtoStationAndSong = 3; //in 30 seconds
    }
    

    function OnTopSongsCompleted(result, context, methodname)
    {
        var arraylines = result.split("|");
        var stationimage = arraylines[0];
        document.getElementById("stationimage").src = stationimage;
        var nsongs = arraylines[1] - 0;
        var out = "";
        if (nsongs == 0) 
        {
            out += "<br />No songs requested in the past week by Nobex Radio Companion users while listening to this station.<br />";
        } 
        else 
        {
            out += "<br />These are the top songs requested by Nobex Radio Companion users in the past week.<br />";
        }
        out += "<table cellspacing='4px' >";
        var mcols = 2;
        var ncol = 0;
        for (i = 0; i < nsongs; i++) {
            var songdetails = arraylines[2 + i].split(";");
            if (songdetails.length == 6) {
                if (ncol == 0) {
                    out += "<tr>";
                }
                out += "<td><img style='height:100px; width:100px;' src='" + songdetails[4] + "' /></td>";
                out += "<td width=200>";
                var place = i + 1;
                out += "#" + place + "<br />";
                out += "<b>" + songdetails[2] + "</b><br>" + 
                    songdetails[3] + "<br>";
                if (songdetails[5] != "None") {
                    out += "Get it from <a href='" + songdetails[5] + "'><img src='images/iTunes.png' /></a>";
                }                    
                out += "</td>";
                ncol++;
                if (ncol == mcols) {
                    ncol = 0;
                    out += "</tr>";
                }
            }
        }
        out += "</table>";
        
        document.getElementById("SpanMostRequested").innerHTML = out;
        
    }
    
