var countStart = 999;
var countDest = 0;
var countCurr = 0;

var mapprojects = new Array();

function counterInit()
{
    countDest = projects.length;
    countCurr = countStart;
    document.getElementById("RunningCounter").firstChild.nodeValue = countCurr;
    counterTick()
}
function counterTick()
{
    countCurr -= parseInt(1+(countStart - countDest)/8);
    if(countCurr < countDest)
    {
        countCurr = countDest;
    }
    else
    {
        setTimeout(counterTick, 50);
    }
    document.getElementById("RunningCounter").firstChild.nodeValue = countCurr;
}

function querystring(name)   // returns a named value from the querystring
{
   var tmp = ( location.search.substring(1) );
   var i   = tmp.toUpperCase().indexOf(name.toUpperCase()+"=");

   if ( i >= 0 )
   {
      tmp = tmp.substring( name.length+i+1 );
      i = tmp.indexOf("&");
      return unescape( tmp = tmp.substring( 0, (i>=0) ? i : tmp.length ));
   }

   return("");
}

function sortByAlphabet()
{
    document.getElementById("SortByName").className = "selected";
    document.getElementById("SortByTime").className = "";
    document.getElementById("SortByStatus").className = "";
    if(sortBy != 'name')
    {
        sortBy = 'name';
        sortDir = 'asc';
    }
    else if(sortDir == 'asc')
    {
        sortDir = 'desc';
    }
    else
    {
        sortDir = 'asc';
    }
    
    createCookie("sortBy",sortBy,365);
    createCookie("sortDir",sortDir,365);
    
    refreshPage();    
}

function sortByTime()
{
    document.getElementById("SortByName").className = "";
    document.getElementById("SortByTime").className = "selected";
    document.getElementById("SortByStatus").className = "";
    if(sortBy != 'time')
    {
        sortBy = 'time';
        sortDir = 'desc';
    }
    else if(sortDir == 'asc')
    {
        sortDir = 'desc';
    }
    else
    {
        sortDir = 'asc';
    }
    
    createCookie("sortBy",sortBy,365);
    createCookie("sortDir",sortDir,365);
    
    refreshPage();    
}

function sortByStatus()
{
    document.getElementById("SortByName").className = "";
    document.getElementById("SortByTime").className = "";
    document.getElementById("SortByStatus").className = "selected";
    if(sortBy != 'status')
    {
        sortBy = 'status';
        sortDir = 'desc';
    }
    else if(sortDir == 'asc')
    {
        sortDir = 'desc';
    }
    else
    {
        sortDir = 'asc';
    }
    
    createCookie("sortBy",sortBy,365);
    createCookie("sortDir",sortDir,365);
    
    refreshPage();    
}

function refreshPage()
{
    var fullUrl = document.location;
    
    //alert(fullUrl.toString().substring(0, fullUrl.toString().indexOf("?")));


    // pre-nice urls
    //var urlToGo = fullUrl.toString().substring(0, fullUrl.toString().indexOf("?"));
    //urlToGo += "?page=" + querystring("page") + "&sortBy=" + sortBy + "&sortDir=" + sortDir;

    var urlToGo = fullUrl.toString();
    if(urlToGo.indexOf("?") > 0)
    {
        urlToGo = urlToGo.substring(0, fullUrl.toString().indexOf("?"));
    }
    urlToGo += "?sortBy=" + sortBy + "&sortDir=" + sortDir;

    //alert('going to ' + urlToGo);
    document.location = urlToGo;
    
    return false;
}

function navigate(direction)
{
    if(direction == "next")
    {
        page++;
        if(page > maxpage)
        {
            page = maxpage;
        }
    }
    else
    {
        page--;
        if(page < 1)
        {
            page = 1;
        }
    }
    buildList();  
}
function changeDisplayMode(mode)
{
    display = mode; // 'list', 'thumbs' or 'map'
    createCookie("display",mode,365);
    page = 1;

    document.getElementById("ModeThumbnails").className = "";
    document.getElementById("ModeList").className = "";
    document.getElementById("ModeMap").className = "";

    switch(display)
    {
        case "list":
            pageSize = PAGE_SIZE_LIST;
            document.getElementById("ModeList").className = "selected";
            break;
        case "thumbs":
            pageSize = PAGE_SIZE_THUMBS;
            document.getElementById("ModeThumbnails").className = "selected";
            break;
        case "map":
            pageSize = PAGE_SIZE_MAP;
            document.getElementById("ModeMap").className = "selected";
            //load();
            //alert(map);
            break;
    }
    maxpage = parseInt(projects.length / pageSize) + 1;
    buildList()
}

function buildList()
{
    counterInit();

    // Hide all view modes
    workListNode.style.display = "none";
    workThumbnailsNode.style.display = "none";
    workMapNode.style.display = "none";
    
    
    var sortedProjects = projects;
    
    // remove all children previously set
    if (workListNode.hasChildNodes())
    {
        while (workListNode.childNodes.length >= 1)
        {
            workListNode.removeChild(workListNode.firstChild);
        } 
    }
    if (workThumbnailsNode.hasChildNodes())
    {
        while (workThumbnailsNode.childNodes.length >= 1)
        {
            workThumbnailsNode.removeChild(workThumbnailsNode.firstChild);
        } 
    }
    
    
    // Correctly set the paging counters and links
    document.getElementById("PagingCounter").firstChild.nodeValue = (projects.length>0?((page-1) * pageSize + 1):0) + " - " + (((page * pageSize)<projects.length)?(page*pageSize):projects.length);
    if(page == 1)
    {
        document.getElementById("PagingPrev").className = "previousInactive";
    }
    else
    {
        document.getElementById("PagingPrev").className = "previousActive";
    }
    if(page == maxpage)
    {
        document.getElementById("PagingNext").className = "nextInactive";
    }
    else
    {
        document.getElementById("PagingNext").className = "nextActive";
    }
        
    for(var i = ((page-1) * pageSize); i < (page * pageSize); i++)
    {
        if(sortedProjects[i])
        {
            var project = sortedProjects[i];
            var listDiv = document.createElement("DIV");
            listDiv.className = "projectListItem";
            
                var listH2 = document.createElement("H2");
                    var listA = document.createElement("A");
                    listA.href = project.Url;
                    listA.appendChild(document.createTextNode(project.Titel));
                        var listSpan = document.createElement("SPAN");
                        listSpan.className = "hyperlinkIcon";
                        listSpan.innerHTML = "&nbsp;&raquo;";
                    listA.appendChild(listSpan)
                listH2.appendChild(listA)
            listDiv.appendChild(listH2);
            
                var listP = document.createElement("P");
                if(project.Project.length > 0)
                {
                    var spanOpgave = document.createElement("SPAN");
                    spanOpgave.appendChild(document.createTextNode("task "));            
                    spanOpgave.className = "listDescription";
                listP.appendChild(spanOpgave);
                listP.appendChild(document.createTextNode(project.Project + "  "));
                }
                if(project.Locatie.length > 0)
                {
                    var spanLocatie = document.createElement("SPAN");
                    spanLocatie.appendChild(document.createTextNode("location "));            
                    spanLocatie.className = "listDescription";
                listP.appendChild(spanLocatie);
                listP.appendChild(document.createTextNode(project.Locatie + "  "));
                }
                if(project.Opdrachtgever.length > 0)
                {
                    var spanIOV = document.createElement("SPAN");
                    spanIOV.appendChild(document.createTextNode("client "));            
                    spanIOV.className = "listDescription";
                listP.appendChild(spanIOV);
                listP.appendChild(document.createTextNode(project.Opdrachtgever + "  "));
                }
                if(project.Partners.length > 0)
                {
                    var spanISM = document.createElement("SPAN");
                    spanISM.appendChild(document.createTextNode("partner "));            
                    spanISM.className = "listDescription";
                listP.appendChild(spanISM);
                listP.appendChild(document.createTextNode(project.Partners + "  "));
                }
                if(project.Jaar_van_ontwerp.length > 0)
                {
                    var spanOntwerp = document.createElement("SPAN");
                    spanOntwerp.appendChild(document.createTextNode("design "));            
                    spanOntwerp.className = "listDescription";
                listP.appendChild(spanOntwerp);
                listP.appendChild(document.createTextNode(project.Jaar_van_ontwerp + "  "));
                }
                if(project.Status.length > 0)
                {
                    var spanStatus = document.createElement("SPAN");
                    spanStatus.appendChild(document.createTextNode("status "));            
                    spanStatus.className = "listDescription";
                listP.appendChild(spanStatus);
                listP.appendChild(document.createTextNode(project.Status + "  "));
                }
            listDiv.appendChild(listP);
            //if(
/*
            var workListNodeChildLink = document.createElement("A");
            workListNodeChildLink.href = project.Url;
            workListNodeChildLink.className = "workListNumber";
            var workListNodeChildLinkText = document.createTextNode(project.ID);
            workListNodeChildLink.appendChild(workListNodeChildLinkText);
            
            var workListNodeChildLink2 = document.createElement("A");
            workListNodeChildLink2.href = project.Url;
            workListNodeChildLink2.className = "workListTitle";
            var workListNodeChildLink2Text = document.createTextNode(project.Title);
            workListNodeChildLink2.appendChild(workListNodeChildLink2Text);
            
            workListNodeChild.appendChild(workListNodeChildLink);
            workListNodeChild.appendChild(workListNodeChildLink2);
            
            var workListNodeChildYears;
            workListNodeChildYears = document.createTextNode(project.Jaar_van_ontwerp);
            workListNodeChild.appendChild(workListNodeChildYears);
            
            workListUL.appendChild(workListNodeChild);
*/
            
            workListNode.appendChild(listDiv);
        }
    }
    
    // create the thumbnails and mark active items
    for(var i = 0; i < sortedProjects.length; i++)
    {
        sortedProjects.onPage = false;
    }

    for(var i = ((page-1) * pageSize); i < (page * pageSize); i++)
    {
        if(sortedProjects[i])
        {
            
            var project = sortedProjects[i];
            project.onPage = true;
            
            var thumbDiv = document.createElement("DIV");
            thumbDiv.className = "projectThumbItem"; // NEEDS TO BE projectThumbItem

                var thumbH2 = document.createElement("H2");
                    var thumbA = document.createElement("A");
                    thumbA.href = project.Url;
                    thumbA.appendChild(document.createTextNode(project.Titel));
                        var thumbSpan = document.createElement("SPAN");
                        thumbSpan.className = "hyperlinkIcon";
                        thumbSpan.innerHTML = "&nbsp;&raquo;";
                    thumbA.appendChild(thumbSpan)
                thumbH2.appendChild(thumbA)
            thumbDiv.appendChild(thumbH2);
                    
                var thumbImg = document.createElement("IMG");
                var re = /src=\"(([^\"])+)\"/;
                var m = re.exec(project.Eerste_kleine_foto);
                if(m != null && m[1] != null)
                {
                    project.thumbUrlExtracted = m[1];
                    thumbImg.src = "img.ashx?width=90&height=90&mode=cutout&path=" + m[1];
                    //thumbImg.src = "_homethumb.php?src=" + m[1];
                }
                else
                {
                    thumbImg.src = "img.ashx?width=90&height=90&mode=cutout&path=blank.jpg";
                    //thumbImg.src = "_homethumb.php?src=blank.jpg";
                }
            thumbDiv.appendChild(thumbImg);

                var thumbP1 = document.createElement("P");
                thumbP1.className = "projectListItemLocation";
                thumbP1.appendChild(document.createTextNode(project.Locatie))
            thumbDiv.appendChild(thumbP1);

                var thumbP2 = document.createElement("P");
                thumbP2.className = "projectListItemYear";
                thumbP2.appendChild(document.createTextNode(project.Jaar_van_ontwerp))
                if(project.Status != '')
                {
                    thumbP2.appendChild(document.createTextNode(", " + project.Status))
                }
            thumbDiv.appendChild(thumbP2);

                var thumbP3 = document.createElement("P");
                thumbP3.className = "projectListItemCategory";
                thumbP3.appendChild(document.createTextNode(project.Discipline))
            thumbDiv.appendChild(thumbP3);
            
            workThumbnailsNode.appendChild(thumbDiv);
        }
    }

    // Display the correct view mode
    switch(display)
    {
        case "thumbs":
            workThumbnailsNode.style.display = "block";
            break;
        case "list":
            workListNode.style.display = "block";
            break;
        case "map":
            workMapNode.style.display = "block";
            load(); // Google Map
            break;
    }
    

}

var PAGE_SIZE_THUMBS = 12;
var PAGE_SIZE_LIST = 999;
var PAGE_SIZE_MAP = 999;

var page = 1;
var sortBy = readCookie("sortBy");
if(!sortBy)
{
    sortBy = 'time';
}
switch(sortBy)
{
    case 'name':
        document.getElementById("SortByName").className = "selected";
        break;
    case 'time':
        document.getElementById("SortByTime").className = "selected";
        break;
    case 'status':
        document.getElementById("SortByStatus").className = "selected";
        break;
}

var sortDir = readCookie("sortDir");
if(!sortDir)
{
    sortDir = 'desc';
}
var display = readCookie("display")
if(!display)
{
    display = 'thumbs'
}
var focusedLocation = "0";

if(querystring("map") != null && querystring("map") != "")
{
    focusedLocation = querystring("map");
}
if(focusedLocation != "0")
{
    display = 'map';
}

var pageSize;
switch(display)
{
    case 'thumbs':
        pageSize = PAGE_SIZE_THUMBS;
        document.getElementById("ModeThumbnails").className = "selected";
        break;
    case 'list':
        pageSize = PAGE_SIZE_LIST;
        document.getElementById("ModeList").className = "selected";
        break;
    case 'map':
        pageSize = PAGE_SIZE_MAP;
        document.getElementById("ModeMap").className = "selected";
        //load(); // Google Map
        break;
    default:
        pageSize = PAGE_SIZE_THUMBS;
        document.getElementById("ModeThumbnails").className = "selected";
        display = 'thumbs';
        break;
}

// Main HTML nodes
var workListNode = document.getElementById("ProjectListBlock");
var workThumbnailsNode = document.getElementById("ProjectThumbnailBlock");
var workMapNode = document.getElementById("ProjectMapBlock");
var workMapNodeForGoogleMaps = document.getElementById("ProjectMap");

var map

function load() {
  if (GBrowserIsCompatible()) {
    map = null
    if(!map)
    {
        map = new GMap2(workMapNodeForGoogleMaps);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(52.4, 4.9), 7);
        map.setMapType(G_SATELLITE_MAP);
        
        fillMap();


    }
  }
}

function fillMap()
{
    /*
    - Go through all works and save a reference + coordinates to the ones that have valid coordinates
    - Draw coordinates on the map, open popup with picture and description
    - Make pop-up clickable
    */
    mapprojects = new Array();
    map.clearOverlays();
    
    var icon = new GIcon(G_DEFAULT_ICON);
    icon.image = "/images/gm_icon.png";
    icon.iconSize = new GSize(7, 7);
    icon.shadow = "/images/gm_shadow.png";
    icon.shadowSize = new GSize(11, 11);
    icon.iconAnchor = new GPoint(1, 1);

    var icon_nietuitgevoerd = new GIcon(G_DEFAULT_ICON);
    icon_nietuitgevoerd.image = "/images/gm_icon_nietuitgevoerd.png";
    icon_nietuitgevoerd.iconSize = new GSize(7, 7);
    icon_nietuitgevoerd.shadow = "/images/gm_shadow.png";
    icon_nietuitgevoerd.shadowSize = new GSize(11, 11);
    icon_nietuitgevoerd.iconAnchor = new GPoint(1, 1);

    var icon_inuitvoering = new GIcon(G_DEFAULT_ICON);
    icon_inuitvoering.image = "/images/gm_icon_inuitvoering.png";
    icon_inuitvoering.iconSize = new GSize(7, 7);
    icon_inuitvoering.shadow = "/images/gm_shadow.png";
    icon_inuitvoering.shadowSize = new GSize(11, 11);
    icon_inuitvoering.iconAnchor = new GPoint(1, 1);

    var icon_invoorbereiding = new GIcon(G_DEFAULT_ICON);
    icon_invoorbereiding.image = "/images/gm_icon_invoorbereiding.png";
    icon_invoorbereiding.iconSize = new GSize(7, 7);
    icon_invoorbereiding.shadow = "/images/gm_shadow.png";
    icon_invoorbereiding.shadowSize = new GSize(11, 11);
    icon_invoorbereiding.iconAnchor = new GPoint(1, 1);

    for(var i = 0; i < projects.length; i++)
    {
        if(parseInt(projects[i].Breedtegraad) > 0 && parseInt(projects[i].Lengtegraad) > 0)
        {
            mapprojects.push(projects[i]);
        }
    }
    
    var minlng, maxlng, minlat, maxlat
    var focusedLng, focusedLat
    var decsep = ".";
    if((parseFloat("5.2")).toString().length < 3)
    {
        decsep = ",";
    }
    for(var i = 0; i < mapprojects.length; i++)
    {
        if(!minlat || minlat > parseFloat(mapprojects[i].Breedtegraad.replace(/\./, decsep)))
        {
            minlat = parseFloat(mapprojects[i].Breedtegraad.replace(/\./, decsep));
        }
        if(!maxlat || maxlat < parseFloat(mapprojects[i].Breedtegraad.replace(/\./, decsep)))
        {
            maxlat = parseFloat(mapprojects[i].Breedtegraad.replace(/\./, decsep));
        }
        if(!minlng || minlng > parseFloat(mapprojects[i].Lengtegraad.replace(/\./, decsep)))
        {
            minlng = parseFloat(mapprojects[i].Lengtegraad.replace(/\./, decsep));
        }
        if(!maxlng || maxlng < parseFloat(mapprojects[i].Lengtegraad.replace(/\./, decsep)))
        {
            maxlng = parseFloat(mapprojects[i].Lengtegraad.replace(/\./, decsep));
        }
        
        if(focusedLocation == mapprojects[i].ID)
        {
            focusedLng = parseFloat(mapprojects[i].Lengtegraad.replace(/\./, decsep));
            focusedLat = parseFloat(mapprojects[i].Breedtegraad.replace(/\./, decsep));
        }
                
        if(mapprojects[i].Status.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "") == "not implemented")
        {
            mapprojects[i].place = new GMarker(new GLatLng(mapprojects[i].Breedtegraad, mapprojects[i].Lengtegraad), icon_nietuitgevoerd); 
        }
        else if(mapprojects[i].Status.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "") == "in progress")
        {
            mapprojects[i].place = new GMarker(new GLatLng(mapprojects[i].Breedtegraad, mapprojects[i].Lengtegraad), icon_inuitvoering); 
        }
        else if(mapprojects[i].Status.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "") == "in preparation")
        {
            mapprojects[i].place = new GMarker(new GLatLng(mapprojects[i].Breedtegraad, mapprojects[i].Lengtegraad), icon_invoorbereiding); 
        }
        else
        {
            mapprojects[i].place = new GMarker(new GLatLng(mapprojects[i].Breedtegraad, mapprojects[i].Lengtegraad), icon); 
        }
        mapprojects[i].place.parent = mapprojects[i];
        map.addOverlay(mapprojects[i].place);
        GEvent.addListener(mapprojects[i].place, "mouseover", function() {
			this.openInfoWindowHtml(this.parent.Titel + '<br /><a href="' + this.parent.Url + '">More &raquo;</a>');
		});
    }
    if(mapprojects.length > 0)
    {
        var lat1 = (maxlat + minlat)/2;
        var lng1 = (minlng + maxlng)/2;
        if(focusedLat && focusedLng)
        {
            lat1 = focusedLat;
            lng1 = focusedLng;
        }
        var zoomlevel = map.getBoundsZoomLevel(new GLatLngBounds(new GLatLng(minlat, minlng), new GLatLng(maxlat, maxlng)));

        if(focusedLat && focusedLng)
        {
            map.setCenter(new GLatLng(lat1, lng1), 16);
            
        }
    }
}


// Project list is shorter on filtered pages

var maxpage = parseInt(projects.length / pageSize) + 1;

buildList();