/**
 * @author Henk Kortier
 */
//CHANGE THE FOLLOWING IN PROTOTYPE.JS
//  setRequestHeaders: function() {
//    var headers = {
//	  'If-Modified-Since': 'Thu, 1 Jan 1970 00:00:00 GMT',
//      'X-Requested-With': 'XMLHttpRequest',
//      'X-Prototype-Version': Prototype.Version,
//      'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
//   };

//-------------------------------------------------------------
// GLOBALS
//-------------------------------------------------------------
var user;
var IONames;
var groupIONames;
var markers;
var devices = [];
var openedTab;
var timerID;
//var gpx_data;


var icons = ["markericons/tracker0.png", "markericons/tracker1.png", "markericons/tracker2.png", "markericons/tracker3.png", "markericons/tracker4.png", "markericons/tracker5.png", "markericons/tracker6.png", "markericons/tracker7.png", "markericons/tracker8.png", "markericons/tracker9.png", "markericons/tracker10.png", "markericons/tracker11.png", "markericons/tracker12.png", "markericons/tracker13.png", "markericons/tracker14.png", "markericons/tracker15.png", "markericons/tracker16.png", "markericons/tracker17.png", "markericons/tracker18.png", "markericons/tracker19.png", "markericons/tracker20.png", "markericons/tracker21.png", "markericons/tracker22.png", "markericons/tracker23.png", "markericons/tracker24.png", "markericons/tracker55.png", "markericons/tracker26.png", "markericons/tracker27.png"];
var colors = ["#ff6600", "#008000", "#000080", "#C0C0C0", "#000000", "#808080", "#808000", "#008080", "#0000FF", "#00FF00", "#800080", "#00FFFF", "#FF00FF", "#800000", "#FF0000", "#FFFF00", "#ffcc00", "#99ccff", "#ff6666", "#ff66cc", "#cc66ff", "#6666ff", "#66ccff", "#66ffcc", "#66ff66", "#ccff66", "#ffcc66", "#996666"];

// Determine time offset for timezone conversion
var localDate = new Date();
var localOffset = localDate.getTimezoneOffset() * 60000;
//-------------------------------------------------------------
//function addEvent(_elem, _evtName, _fn, _useCapture)
//{
//   if (typeof _elem.addEventListener != 'undefined')
//   {
//      if (_evtName === 'mouseenter')
//         { _elem.addEventListener('mouseover', mouseEnter(_fn), _useCapture); }
//      else if (_evtName === 'mouseleave')
//         { _elem.addEventListener('mouseout', mouseEnter(_fn), _useCapture); }
//      else
//         { _elem.addEventListener(_evtName, _fn, _useCapture); }
//   }
//   else if (typeof _elem.attachEvent != 'undefined')
//   {
//      _elem.attachEvent('on' + _evtName, f);
//   }
//   else
//   {
//      _elem['on' + _evtName] = f;
//   }
//}
//
//function mouseEnter(_fn)
//{
//   return function(_evt)
//   {
//      var relTarget = _evt.relatedTarget;
//      if (this === relTarget || isAChildOf(this, relTarget))
//         { return; }
//
//      _pFn.call(this, _evt);
//   }
//};
//
//function isAChildOf(_parent, _child)
//{
//   if (_parent === _child) { return false; }
//      while (_child && _child !== _parent)
//   { _child = _child.parentNode; }
//
//   return _child === parent;
//}

//-------------------------------------------------------------


//-------------------------------------------------------------
// AJAX Handlers
// 
// Show 'alert' when Create new ajax object en remove when ready
//-------------------------------------------------------------

var myGlobalHandlers = {
    onCreate: function(){
        Element.show('waitbar');
    },
    onComplete: function(){
        if (Ajax.activeRequestCount == 0) {
            Element.hide('waitbar');
        }
    }
};

Ajax.Responders.register(myGlobalHandlers);

//-------------------------------------------------------------
// Map Init
//-------------------------------------------------------------

var map; //complex object of type OpenLayers.Map
var mapMarkers;
var layer;
var bounds;
var vectors;

var size = new OpenLayers.Size(15, 23);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
//var baseIcon = new OpenLayers.Icon(icons[0], size, offset);

//-------------------------------------------------------------
// Object constructors
//-------------------------------------------------------------

function newUser(id, name, mail, number, option1, option2, option3){
    this.name = name;
    this.id = id;
    this.number = number;
    this.mail = mail;
    var newOptions = new Object();
    newOptions.alarm = option1;
    newOptions.geofence = option2;
    newOptions.highlight = option3;
    this.options = newOptions;
}

//-------------------------------------------------------------
// Functions
//-------------------------------------------------------------	

// Date string to date object
function parseDate(s){
    // 	var d = new Date();
    var td = s.replace(/[-_\\\.]/gm, "/");
    var d = Date.parse(td);
    return d;
}

// Setup url format for tile retrievement
function get_osm_url(bounds){
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) /
    (res *
    this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) /
    (res *
    this.tileSize.h));
    var z = this.map.getZoom();
    var path = z + "/" + x + "/" + y + "." + this.type;
    var url = this.url;
    if (url instanceof Array) {
        url = this.selectUrl(path, url);
    }
    return url + path;
}

//Change the body class
function changeBodyClass(from, to){
    document.body.className = document.body.className.replace(from, to);
    return false;
}

// Retrieve userID
function retrieveUserID(userRetrieved){
    var url = "retrieveUserID.php";
    
    new Ajax.Request(url, {
        method: 'GET',
        crossSite: false,
        onComplete: userRetrieved
    });
}

// Check if user is prohibited for certain functions
function optionsSwitch(){
    //var alarmOption = /a/.test(userOptions);
    //var geofenceOption = /g/.test(userOptions);
    // 	if (!alarmOption) {
    // 		changeBodyClass('function-alarm-on', 'function-alarm-off');
    // 	}
    // 	if (!geofenceOption) {
    // 		changeBodyClass('function-geofence-on', 'function-geofence-off');
    changeBodyClass('function-alarm-on', 'function-alarm-off');
    changeBodyClass('function-geofence-on', 'function-geofence-off');
    changeBodyClass('function-livetracking-on', 'function-livetracking-off');
}

// Retrieve IONames of all devices which belongs to the specific users
function retrieveIONames(userID){
    url = "retrieveIONames.php?userid=" + userID;
    new Ajax.Request(url, {
        method: 'GET',
        crossSite: false,
        onComplete: function(transport){
            var responseText = eval(transport.responseText);
            IONames = responseText;
        }
    });
}

// Retrieve IONames of all groups which belongs to the specific users
function retrieveGroupIONames(userID){
    url = "retrieveGroupIONames.php?userid=" + userID;
    new Ajax.Request(url, {
        method: 'GET',
        crossSite: false,
        onComplete: function(transport){
            var responseText = eval(transport.responseText);
            groupIONames = responseText;
        }
    });
}

// Function to convert normal latitude/longitude to mercator easting/northings
function lonLatToMercator(ll){
    var lon = ll.lon * 20037508.34 / 180;
    var lat = Math.log(Math.tan((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
    lat = lat * 20037508.34 / 180;
    
    return new OpenLayers.LonLat(lon, lat);
}

// Retrieve the last marker of all devices
function getMarkers(userid, firstload, clean, zoom){
    var points = $('points-field').value;
    var date = $('date-field').innerHTML;
    var device = $('options-device-field').value;
    var velocity = $('velocity-field').value;
    var deviceStatus = $('status-field').value;
    var maxpoints = $('maxpoints-field').value;
    var route = "undefined";
    
    if (points == "") {
        points = "undefined";
    }
    if (date == "Klik voor kalender" || date == "") {
        date = "undefined";
    }
    if (device == "") {
        deviceSelID = "undefined";
    }
    
    if (maxpoints == "") {
        maxpoints = 150;
    }
    if (velocity == "") {
        velocity = "undefined";
    }
    if (deviceStatus == "") {
        deviceStatus = "undefined";
    }
    
    var url = "retrieveMarkers.php?userid=" + userid + "&points=" + points + "&device=" + deviceSelID + "&date=" + date + "&route=" + route + "&velocity=" + velocity + "&deviceStatus=" + deviceStatus + "&max=" + maxpoints;
    
    new Ajax.Request(url, {
        method: 'GET',
        onSuccess: function(transport){
			//alert(json ? Object.inspect(json) : "no JSON object");
            if (markers != undefined) {
                if (clean) {
                    cleanData();
                }
            }
            //devices = [];
            //cleanMarkerData();
            //reload = true;
			markers = transport.responseText.evalJSON();

            //markers = eval(transport.responseText);
            //bounds = new OpenLayers.Bounds();
            initMarkers(firstload, zoom);
        }
    });
}

// Convert the retrieved dbase data to OL markers
function initMarkers(firstload, zoom){
    var allTypes = {
        'Alle': []
    };
    
    for (var index = 0; index < markers.length; ++index) {
        var item = markers[index];
        initializePoint(item);
        allTypes[item.Groupname] = true;
    }
    
    if (firstload) {
        // 		var groupname;
        for (groupname in allTypes) {
            initializeSortTab(groupname);
        }
    }
    
    if (zoom) {
        map.zoomToExtent(bounds);
        var zoomLevel = map.getZoom();
        
        if (zoomLevel == 17) {
            map.zoomTo(15);
        }
    }
}

// Init every coord into marker + popup + listitem
function initializePoint(pointData){
    var i = 0;
    var j = 0;
    var alreadyListed = false;
    
    var deviceID = pointData.DeviceID;
    
    for (i; i < devices.length; i++) {
        if (devices[i] == deviceID) {
            alreadyListed = true;
            break;
        }
    }
    // 	
    for (j; j < IONames.length; j++) {
        if (IONames[j].DeviceID == deviceID) {
            pointData.IONamesID = j;
            break;
        }
    }
    
    var icon = new OpenLayers.Icon(icons[i], size, offset);
    var point = lonLatToMercator(new OpenLayers.LonLat(parseFloat(pointData.Longitudinal), parseFloat(pointData.Latitudinal)));
    //	var point = new OpenLayers.LonLat(parseFloat(pointData.Longitudinal), parseFloat(pointData.Latitudinal)); 
    
    var marker = new OpenLayers.Marker(point, icon);
    
    bounds.extend(point);
    
    var visible = false;
    
    pointData.date = new Date((parseDate(pointData.GMTDate) - localOffset)).toLocaleString();
    
    if ((pointData.UK == "1") && user.options.highlight) {
        var highlight = true
    }
    else {
        var highlight = false
    };
    
    if (!alreadyListed) {
        devices.push(deviceID);
        var listItem = document.createElement('li');
        //        if (alarm) {
        //           listItem.background = 'red';
        //        }
        //        else {
        //            listItem.background = 'brown';
        //        }
        var listItemLink = listItem.appendChild(document.createElement('a'));
        listItemLink.href = "javascript:void(0);";
        if (highlight) {
            listItemLink.setAttribute('style', 'border: 2px solid red');
        };
        //        if (alarm) {
        //            listItemLink.innerHTML = '<font color= ' + colors[i] + '><strong>' + pointData.Devicename + ' </strong></font>' + listAlarmText;
        //        }
        //        else {
        var deviceTitle = document.createElement('strong');
        var dateTitle = document.createElement('span');
        deviceTitle.innerHTML = pointData.Devicename;
        dateTitle.innerHTML = pointData.date;
        deviceTitle.style.color = colors[i];
        listItemLink.appendChild(deviceTitle);
        listItemLink.appendChild(dateTitle);
        // listItemLink.innerHTML = '<font color= ' + colors[i] + '><strong>' + pointData.Devicename + ' </strong></font><span>' + pointData.date + '</span>';
        //        }
    }
    
    var url = "http://maps.google.nl/maps?hl=nl&spn=0.3,0.3&q=" + pointData.Latitudinal + "," + pointData.Longitudinal;
    
    
    var focusPoint = function(evt){
        //stopBubbling(evt);
        deselectCurrent();
        if (!alreadyListed) {
            listItem.className = 'current';
            deselectCurrent = function(){
                listItem.className = '';
            }
        }
        //map.setCenter(point, map.getZoom(), false, false);
        extendedMarkerInformation(pointData, deviceID, url);
        map.panTo(point);
        return false;
    }
    
    var property;
    var popup;
    
    var listClick = function(){
        device = pointData.Devicename;
        deviceSelID = pointData.DeviceID;
        deviceClick(j, device, deviceSelID);
        return false;
    }
    
    var infoPopup = function(evt){
        listClick();
        if (popup == null) {
            registerPopup()
        }
        else {
            onPopupClose(evt);
        }
        OpenLayers.Event.stop(evt);
        return false;
    }
    //   popup = feature.createPopup(true);
    //  popup.setContentHTML(text);
    //   // popup.setBackgroundColor("yellow");
    //   popup.setSize(new OpenLayers.Size(300, 200));
    //   popup.setOpacity(0.9);
    //   mapMarkers.map.addPopup(popup);
    //}
    //else {
    //    mapMarkers.map.removePopup(popup);
    //    popup.destroy();
    //    popup = null;
    //}
    
    //OpenLayers.Event.stop(evt);
    //return false;
    //}
    
    function googleWindow(){
        popupWin = window.open(url, 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0');
    }
    
    
    function registerPopup(){
        var text = "<table class=\"infolabel\"><thead><tr><td colspan=\"2\" id=\"markername\"><div align=\"center\"><a href=\"" + url + "\" target=\"_blank\">" + pointData.Devicename + "</a></div></td></tr></thead><tbody><tr><td>Tijdstip:</td><td id=\"right\">" + pointData.date + "</td></tr></tbody>";
        
        //var text = "<table id=\"infolabel\"><tbody><tr><td colspan=\"2\" id=\"markername\"><div align=\"center\"><a href=\"#\" onclick=\"" + googleWindow(); + "\">" + pointData.Devicename + "</a></div></td></tr><tr><td>Tijdstip:</td><td id=\"right\">" + pointData.date + "</td></tr><p>";	
        
        for (var id in IONames[j]) {
            property = IONames[j][id];
            if (property != "" && property != deviceID) {
                text += "<tr><td>" + property + ":</td><td id=\"right\">" + pointData[id] + "</td></tr>";
            }
        }
        
        text += "</tbody></table>";
        
        popup = new OpenLayers.Popup.FramedCloud(null, point, new OpenLayers.Size(300, 300), text, icon, true, onPopupClose);
        popup.setOpacity(0.7);
        mapMarkers.map.addPopup(popup);
    }
    
    //	function (marker){
    //		extendedMarkerInformation(marker);
    //	} 
    
    function onPopupClose(evt){
        mapMarkers.map.removePopup(popup);
        popup.destroy();
        popup = null;
        OpenLayers.Event.stop(evt);
    }
    
    if (!alreadyListed) {
        listItemLink.ondblclick = (infoPopup);
        listItemLink.onclick = (listClick);
        deviceTitle.onmouseover = (focusPoint);
        //
        //listItem.addEvent("mouseenter", focusPoint);
    }
    
    pointData.show = function(){
        if (!visible) {
            if (!alreadyListed) {
                $('sidebar-list').appendChild(listItem);
            }
            mapMarkers.addMarker(marker);
            
            // var mouseDown = false;
            // marker.events.register('mouseover', marker, infoPopup);
            marker.events.register('mousedown', marker, function(evt){
                //     mouseDown = true;
                infoPopup(evt);
            });
            //marker.events.register('mouseout', marker, function(evt){
            //     if (!mouseDown) {
            //       onPopupClose(evt);
            //       OpenLayers.Event.stop(evt);
            //     }
            // });
            
            //   marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
            //   marker.setImage(icons[i]);
            visible = true;
        }
    }
    
    pointData.hide = function(){
        if (visible) {
            if (!alreadyListed) {
                $('sidebar-list').removeChild(listItem);
            }
            mapMarkers.removeMarker(marker);
            //marker.destroy();
            visible = false;
        }
    }
    
    pointData.show();
}

function stopBubbling(e){
    if (!e) 
        var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) 
        e.stopPropagation();
}

function extendedMarkerInformation(pointData, deviceID, url){

    var leftSideBar = $('sidebar-left');
    
    //    var extendedMarkerTable = $('extendedMarker-table');
    //    
    while (leftSideBar.firstChild) {
        leftSideBar.removeChild(leftSideBar.firstChild);
    }
    
    //	if($('extendedMarker-table')){
    //		leftSideBar.removeChild($('extendedMarker-table'))	;
    //	}
    
    var IONamesID = pointData.IONamesID;
    
    var table = document.createElement('table');
    table.setAttribute('id', 'extendedMarker-table');
    table.setAttribute('className', 'infolabel');
    table.setAttribute('class', 'infolabel');
    var tblhead = document.createElement('thead');
    var tblbody = document.createElement('tbody');
    var row = document.createElement('tr');
    var col1 = document.createElement('td');
    //    var col2 = document.createElement('td');
    var link = document.createElement('a');
    
    link.setAttribute('href', url);
    link.setAttribute('target', '_blank');
    link.innerHTML = pointData.Devicename;
    
    col1.setAttribute('id', 'propertycol');
    col1.appendChild(link);
    
    //    col2.setAttribute('id', 'right');
    //    col2.innerHTML = pointData.date;
    
    row.appendChild(col1);
    //    row.appendChild(col2);
    tblhead.appendChild(row);
    table.appendChild(tblhead);
    //   table.appendChild(tblhead);
    
    //    for (var index = 0; index < IONames[IONamesID].length; ++index) {
    for (var index in IONames[IONamesID]) {
        var property = IONames[IONamesID][index];
        if (property != "" && property != deviceID) {
            var tblbody = document.createElement('tbody');
            var row = document.createElement('tr');
            var col1 = document.createElement('td');
            var col2 = document.createElement('td');
            
            col1.innerHTML = property;
            col2.innerHTML = pointData[index];
            col2.setAttribute('id', 'right');
            
            row.appendChild(col1);
            row.appendChild(col2);
            tblbody.appendChild(row);
            table.appendChild(tblbody);
        }
    }
    //	}
    //    
    //    //        table += "</tbody></table>";
    //
    leftSideBar.appendChild(table);
    //    		return false;
}


// Sort different groups, topbar
function initializeSortTab(groupname){
    var listItem = document.createElement('li');
    var listItemLink = listItem.appendChild(document.createElement('a'));
    
    listItemLink.href = "javascript:void(0);";
    listItemLink.innerHTML = groupname;
    
    listItemLink.onclick = function(){
        //  var groupID;
        //  var groupLocID = 0;
        
        //        for (index in markers) {        
        for (var index = 0; index < markers.length; ++index) {
            if (markers[index].Groupname == groupname || 'Alle' == groupname) {
                //alert(groupname);
                //groupID = markers[index].GroupID;
                //if (alarmTab) {
                //	var j;
                //for (var j = 0; j < groupIONames.length; j++) {
                //    if (groupIONames[j].GroupID == groupID) {
                //       markers[index].groupIONamesID = j;
                //        groupLocID = j;
                //       break;
                //    }
                //}
                //}
                markers[index].show();
            }
            else {
                markers[index].hide();
            }
            //	return false;
        }
        //groupClick(groupname, groupID, groupLocID);
    }
    $('filters').appendChild(listItem);
}

// Deselected selected listitem
var deselectCurrent = function(){
};

function cleanData(){
    for (var index = 0; index < markers.length; ++index) {
        markers[index].hide();
    }
    
    devices = [];
    markers = [];
    
    // 	pmarkers = [];
    // 	poly = [];
    
    // 	var groupNameNode = $('filters');
    var sidebarNode = $('sidebar-list');
    
    // 	while (groupNameNode.firstChild) {
    // 		groupNameNode.removeChild(groupNameNode.firstChild);
    // 	}
    
    while (sidebarNode.firstChild) {
        sidebarNode.removeChild(sidebarNode.firstChild);
    }
    
    return;
}

function reloadMarkers(cleanAll){
    //devices = [];
    //cleanMarkerData();
    //    reload = true;
    //bounds = new OpenLayers.Bounds();
    getMarkers(user.id, false, true, true);
    map.zoomToExtent(bounds);
    return changeBodyClass('popup-options-show', 'popup-options-hide');
}

// What to do when a certain marker or listitem is clicked
function deviceClick(IONamesloc, device, deviceid){

    switch (openedTab) {
        case "options":
            $('options-device-field').value = device;
            break;
        case "route":
            var checkDateField = /\b\d{1,2}\-\d{1,2}-\d{1,2}\b/;
            if ($('routeDateField')) {
                var dateField = $("routeDateField").value;
                if (dateField == "") {
                    routeTable(deviceSelID, "all");
                }
                if (dateField.match(checkDateField)) {
                    routeTable(deviceSelID, dateField);
                }
            }
            else {
                routeTable(deviceSelID, 'undefined');
            }
            break;
    }
    return;
}

function routeTable(deviceSelID, date){
    //var selectfield = $('route-date-selectfield');
    
    url = "retrieveRoutes.php?deviceid=" + deviceSelID + "&date=" + date;
    
    new Ajax.Request(url, {
        method: 'get',
        onComplete: function(transport){
            var routes = eval(transport.responseText);
            //if (routes) {
            fillRouteTable(routes)
            //}
            //            else {
            //                var leftSidebar = $('sidebar-left');
            //                var table = document.createElement('table');
            //                table.setAttribute('id', 'route-table');
            //                //var table = $('route-table');
            //                //while (table.firstChild) {
            //                //    table.removeChild(table.firstChild);
            //                //}
            //                var row = document.createElement('tr');
            //                var col = document.createElement('td');
            //                col.className = 'table_headerc';
            //                col.innerHTML = "Geen Ritten!";
            //                row.appendChild(col);
            //                table.appendChild(row);
            //                leftSidebar.appendChild(table);
            //            }
        
        }
    });
    //remove alle options

    //haal datums op

    //vul select veld

    //maak tabel met laatste 10 ritten

    //onclick op option ->haal routes van die dag op+ververs tabel

}

function fillRouteTable(routes){

    //    var routeId;
    
    //    var routeTable = $('route-table');
    //    if (routeTable.firstChild) {
    
    //    }    
    
    var leftSidebar = $('sidebar-left');
    
    if ($('route-table')) {
        var routetable = $('route-table')
        while (routetable.firstChild) {
            routetable.removeChild(routetable.firstChild);
        }
    }
    
    if (!$('date-table')) {
        var datetable = document.createElement('table');
        datetable.setAttribute('className', 'infolabel');
        datetable.setAttribute('class', 'infolabel');
        datetable.setAttribute('id', 'date-table');
        
        var tbody = document.createElement('tbody');
        var row2 = document.createElement('tr');
        var col4 = document.createElement('td');
        var col5 = document.createElement('td');
        var datelink = document.createElement('a');
        var dateinput = document.createElement('input');
        
        col4.className = 'table_inner1';
        col5.className = 'table_inner1';
        
        datelink.setAttribute('href', '#');
        datelink.setAttribute('id', 'renewRouteTable');
        datelink.innerHTML = "Zoek op datum";
        
        datelink.onclick = function(){
            var dateField = document.getElementById("routeDateField").value;
            if (dateField == "") {
                routeTable(deviceSelID, "all");
                return false;
            }
            if (dateField != "dd-mm-yyyy") {
                routeTable(deviceSelID, dateField);
                return false;
            }
            else {
                alert("Vul datum in");
                return false;
            }
        }
        
        dateinput.setAttribute('id', 'routeDateField');
        dateinput.setAttribute('type', 'text');
        dateinput.setAttribute('value', 'dd-mm-yyyy');
        dateinput.setAttribute('size', '12');
        
        col4.appendChild(datelink);
        col5.appendChild(dateinput);
        row2.appendChild(col4);
        row2.appendChild(col5);
        tbody.appendChild(row2);
        datetable.appendChild(tbody)
        leftSidebar.appendChild(datetable);
    }
    
    if (!$('route-table')) {
        var routetable = document.createElement('table');
        routetable.setAttribute('class', 'infolabel');
        routetable.setAttribute('className', 'infolabel');
        routetable.setAttribute('id', 'route-table');
    }
    
    var tblhead = document.createElement('thead');
    var row = document.createElement('tr');
    var col1 = document.createElement('th');
    var col2 = document.createElement('th');
    var col3 = document.createElement('th');
    
    col1.innerHTML = "Datum (#C)";
    col2.innerHTML = "Startijd";
    col3.innerHTML = "Stoptijd";
    
    col1.className = 'table_headerc';
    col2.className = 'table_headerc';
    col3.className = 'table_headerc';
    
    row.appendChild(col1);
    row.appendChild(col2);
    row.appendChild(col3);
    tblhead.appendChild(row);
    routetable.appendChild(tblhead);
    
    leftSidebar.appendChild(routetable);
    
    
    if (routes) {
        for (var i = 0; i < routes.length; i++) {
            var route = routes[i];
            generateRouteTable(route);
        }
    }
    else {
        var tblbody = document.createElement('tbody');
        col1.innerHTML = "Geen ritten";
        row.appendChild(col1);
        tblbody.appendChild(row);
        routetable.appendChild(tblbody);
    }
    
}

//Setup the route table
function generateRouteTable(route){
    var startTime;
    var stopTime;
    var calendar;
    
    var table = $('route-table');
    
    var tblBody = document.createElement('tbody');
    var row = document.createElement('tr');
    var head = document.createElement('thead')
    var col1 = document.createElement('td');
    var col2 = document.createElement('td');
    var col3 = document.createElement('td');
    var link = document.createElement('a');
    
    //link.setAttribute('href', '#');
    //var routeID = Route.RouteID;
    
    route.showRoute = function(){
        //devices = [];
        //cleanMarkerData();
        //reload = true;
        //bounds = new OpenLayers.Bounds();
        
        var url = "retrieveMarkers.php?userid=" + user.id + "&points=undefined&device=undefined&date=undefined&route=" + route.RouteID + "&velocity=undefined&deviceStatus=undefined&max=50";
        
        new Ajax.Request(url, {
            method: 'get',
            onComplete: function(transport){
                //if (markers != undefined) {
                //devices = [];
                cleanData();
                //}
                //bounds = new OpenLayers.Bounds();
                markers = eval(transport.responseText);
                initMarkers(false, true);
            }
        });
    }
    
    link.onclick = route.showRoute;
    
    var startTime = new Date((parseDate(route.StartGMTDate) - localOffset));
    
    var startMonth = startTime.getMonth() + 1;
    if (startMonth < 10) {
        startMonth = "0" + startMonth;
    }
    
    var startDay = startTime.getDate();
    if (startDay < 10) {
        startDay = "0" + startDay;
    }
    
    var startHours = startTime.getHours();
    if (startHours < 10) {
        startHours = "0" + startHours;
    }
    
    var startMinutes = startTime.getMinutes();
    if (startMinutes < 10) {
        startMinutes = "0" + startMinutes;
    }
    
    
    if (route.StopGMTDate == "0000-00-00 00:00:00") {
        var stopHours = "---";
        var stopMinutes = "";
    }
    else {
        var stopTime = new Date((parseDate(route.StopGMTDate) - localOffset));
        var stopHours = stopTime.getHours();
        if (stopHours < 10) {
            stopHours = "0" + stopHours;
        }
        
        var stopMinutes = stopTime.getMinutes();
        
        if (stopMinutes < 10) {
            stopMinutes = "0" + stopMinutes;
        }
        
    }
    
    link.innerHTML = startDay + "/" + startMonth + " (" + route.Coordinates + ")";
    col2.innerHTML = startHours + ":" + startMinutes;
    col3.innerHTML = stopHours + ":" + stopMinutes;
    
    // 				selectObj.add(option,null);
    
    
    col1.className = 'table_inner1';
    col2.className = 'table_inner1';
    col3.className = 'table_inner1';
    
    col1.appendChild(link);
    row.appendChild(col1);
    row.appendChild(col2);
    row.appendChild(col3);
    
    //				row.id = routes[i].RouteID;
    
    tblBody.appendChild(row);
    table.appendChild(tblBody);
}

//

//Calculeer het aantal markers
function calculateMarkers(user){

    var date = $('date-field').innerHTML;
    var device = $('options-device-field').value;
    var velocity = $('velocity-field').value;
    var deviceStatus = $('status-field').value;
    var routeList = $('options-route-field');
    
    if (!date || date == "Klik voor kalender" || date == "") {
        date = "undefined";
    }
    if (!device || device == "") {
        deviceSelID = "undefined";
    }
    
    route = "undefined";
    
    if (!velocity || velocity == "") {
        velocity = "undefined";
    }
    if (!deviceStatus || deviceStatus == "") {
        deviceStatus = "undefined";
    }
    
    var url = "retrieveNumberOfMarkers.php?user=" + user.id + "&device=" + deviceSelID + "&route=" + route + "&date=" + date + "&velocity=" + velocity + "&status=" + deviceStatus;
    
    new Ajax.Request(url, {
        method: 'get',
        onComplete: function(transport){
            //var NrMarkers = eval(transport.responseText);
            $('points-field').value = eval(transport.responseText);
        }
    });
}

//Auto refresh
function autoMarkerRefresh(){
    //reload = true;
    var refreshRate = $("RPRefreshRate").value;
    var autoZoom = $("RPAutoZoom").checked;
    changeBodyClass('popup-autoreload-show', 'popup-autoreload-hide');
    markerTimer(refreshRate, autoZoom);
}

//Timer
function markerTimer(refreshRate, autoZoom){
    //cleanAllData();
    
    //if (!autoZoom) {
    //    var bounds = map.getExtent();
    //}
    
    getMarkers(user.id, false, true, autoZoom);
    
    //if (!autoZoom) {
    //    map.zoomToExtent(bounds);
    //}
    
    timerID = window.setTimeout(function(){
        markerTimer(refreshRate, autoZoom)
    }, refreshRate * 1000);
}

function stopTrackingMode(){
    clearTimeout(timerID);
    changeBodyClass('popup-autoreload-show', 'popup-autoreload-hide');
    // 	status = "stopped"; 
    //  location.reload(true);
    // 	return changeBodyClass('popup-realtime-show', 'popup-realtime-hide');
}

//Retrieve vector from http://srv03.clicktrace.nl/python/routeAsGpx2.py/routeToGpx

function displayRoutes(markers){
    var lat1;
    var lon1;
    var lat2;
    var lon2;

    
    var in_options = {
        'externalProjection': map.baseLayer.projection,
        'internalProjection': new OpenLayers.Projection("EPSG:900913"),
        'extractWaypoints': false,
        'extractRoutes': false,
        'extractAttributes': false
    };
    
    var track = new OpenLayers.Format.GPX(in_options);
    
    var index2 = 1;
	
    for (var index = 0; index < (markers.length - 1); ++index) {
	    lat1 = markers[index].Latitudinal;
        lon1 = markers[index].Longitudinal;
        //var lat2 = markers[index2].Latitudinal;
        //var lon2 = markers[index2].Longitudinal;
        var dist = 0;
        //var dist = Math.sqrt(Math.pow((lat2-lat1),2)+Math.pow((lon2-lon1),2));
        //alert(dist);
        
        while ((dist < 0.03) && (index2 < markers.length)) {
            lat2 = markers[index2].Latitudinal;
            lon2 = markers[index2].Longitudinal;
            dist = Math.sqrt(Math.pow((lat2 - lat1), 2) + Math.pow((lon2 - lon1), 2));
            
            index2 = index2 + 1;
        }
        index = index2 - 2;
        index2 = index2 - 1;
        
        //if ((markers[index].Latitudinal != markers[index+1].Latitudinal) && (markers[index].Longitudinal != markers[index+1].Longitudinal)){
        //	&& (markers[index].UC != 3) && (markers[index+1].UC != 3)) {
        
        //			var dist = Math.sqrt(Math.pow((lat2-lat1),2)+Math.pow((lon2-lon1),2));
        //			alert(dist);
        
        var url = "retrieveTracks.php?lat1=" + lat1 + "&lon1=" + lon1 + "&lat2=" + lat2 + "&lon2=" + lon2;
		
	
			new Ajax.Request(url, {
				method: 'get',
				//asynchronous: 'false',
				//crossSite: true,
				onSucces: function(transport){
					var features = track.read(transport.responseText);
					track = 0;
					if (features) {
						//  if(features.constructor != Array) {
						//      features = [features];
						//  }
						//  for(var i=0; i<features.length; ++i) {
						//	if (!bounds) {
						//		bounds = features[i].geometry.getBounds();
						//	}
						//	else {
						//		bounds.extend(features[i].geometry.getBounds());
						//	}
						
						//  }
						vectors.addFeatures(features);
					//	map.zoomToExtent(bounds);
					//var plural = (features.length > 1) ? 's' : '';
					//element.value = features.length + ' feature' + plural + ' added'
					}
					else {
						alert("bad feature");
					}
				}
			});
		
    }
}

function GPXExport(nFlag){
    var txt = $("xml-textarea");
    var sXML = "<?xml version=\"1.0\"?>\n" +
    "<gpx version=\"1.1\"\n" +
    "  creator=\"Clicktrace Route Creator\"\n" +
    "  xmlns=\"http://www.topografix.com/GPX/1/1\"\n" +
    "  xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n" +
    "  xsi:schemaLocation=\"http://www.topografix.com/GPX/1/1 \n" +
    "  http://www.topografix.com/GPX/1/1/gpx.xsd\">\n" +
    "  <rte>\n";
    // var obj=$("txtRouteName");
    // var sRouteName = obj.value;
    // if (sRouteName.length==0) sRouteName="Clicktrace";
    sXML += "    <name>" + sRouteName + "</name>\n";
    for (var i = 0; i < markers.length; i++) {
        if (nFlag == 2 && arComments[i].length == 0) 
            continue;
        sXML += "    <rtept lat=\"" + markers[i].Latitudinal + "\" lon=\"" + markers[i].Latitudinal + "\">\n";
        sXML += "";
        var sName = "";
        sName += (i);
        sXML += "      <time>" + markers[i].GMTDate + "/time\>\n";
        //if (arComments[i].length>0) sName+="-"+arComments[i];
        //            sXML+="      <name>" + + "</name>\n";
        sXML += "      <cmt>" + sName + "</cmt>\n";
        sXML += "    </rtept>\n";
    }
    sXML += "  </rte>\n</gpx>";
    //txt.value=sXML;
}


//-------------------------------------------------------------
// Init when loading page
//-------------------------------------------------------------

function init(){

    // Buttons
    
    //right bar
    $('button-sidebar-hide').onclick = function(){
        return changeBodyClass('sidebar-right', 'nosidebar');
    };
    $('button-sidebar-show').onclick = function(){
        return changeBodyClass('nosidebar', 'sidebar-right');
    };
    
    //footer bar
    $('button-options-hide').onclick = function(){
        openenTab = "";
        return changeBodyClass('popup-options-show', 'popup-options-hide');
    };
    $('button-options-show').onclick = function(){
        openedTab = "options";
        return changeBodyClass('popup-options-hide', 'popup-options-show');
    };
    
    $('button-autoreload-hide').onclick = function(){
        return changeBodyClass('popup-autoreload-show', 'popup-autoreload-hide');
    };
    $('button-autoreload-show').onclick = function(){
        return changeBodyClass('popup-autoreload-hide', 'popup-autoreload-show');
    };
    
    //direct reloading
    $('button-reloadmarkers').onclick = function(){
        reloadMarkers(false);
    };
    
    $('button-retrieveRoutes-show').onclick = function(){
        if (!deviceSelID || deviceSelID == "undefined") {
            alert("Selecteer eerst een device!");
        }
        else {
            routeTable(deviceSelID, "undefined");
            openedTab = "route";
            //            return changeBodyClass('sidebar-left-hide', 'sidebar-left-show');
        }
    }
    
    //    $('button-retrieveRoutes-hide').onclick = function(){
    //        routeID = undefined;
    //        openedTab = "";
    //        return changeBodyClass('sidebar-left-show', 'sidebar-left-hide');
    //    };
    
    //var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    var layer_style = OpenLayers.Feature.Vector.style['default'];
    
    layer_style.strokeOpacity = 0.8;
    layer_style.strokeColor = "#000000";
    layer_style.strokeWidth = 4;
    
    vectors = new OpenLayers.Layer.Vector("Vector Layer", {
        style: layer_style
    });
    //  vectors.setIsBaseLayer(false);
    //  vectors.setVisibility(true);
    
    // Create openlayers map  
    map = new OpenLayers.Map("map", {
//        controls: [new OpenLayers.Control.Permalink(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.AM_Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.EditingToolbar(vectors), new OpenLayers.Control.MousePosition()],
		controls: [new OpenLayers.Control.Permalink(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.AM_Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.MousePosition()],
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'm',
        //        projection: "EPSG:41001"
        projections: "EPSG: 4326"
    });
   
     // create the bottom map (with advanced overview map control)
	var mapOptions = {maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
      maxResolution:156543.0399, units:'meters', projection: "EPSG:41001"};
   
    var controlOptions = {
      mapOptions: mapOptions
  	}; 
    
    var miniMap = new OpenLayers.Control.OverviewMap(controlOptions);
		map.addControl( miniMap );
    
    // Different Layers	
    var layerMapnik = new OpenLayers.Layer.TMS("Mapnik - OSM", "http://tile.openstreetmap.org/mapnik/", {
        type: 'png',
        getURL: get_osm_url,
        displayOutsideMaxExtent: true
    }, {
        'buffer': 1
    });
    
    var layerMapnikNL = new OpenLayers.Layer.TMS("Mapnik - NL", "http://tile.openstreetmap.nl/mapnik/", {
        type: 'png',
        getURL: get_osm_url,
        displayOutsideMaxExtent: true
    }, {
        'buffer': 1
    });

	var gmap = new OpenLayers.Layer.Google(
		"Google Streets", // default google
		{zumZoomLevels: 20}
	);
    
//    var layerClicktrace_modtile = new OpenLayers.Layer.TMS("Mapnik - Clicktrace-mod_tile", "http://tile.clicktrace.nl/osm_tiles2/", {
//        getURL: get_osm_url,
//        displayOutsideMaxExtent: true,
//        transitionEffect: 'resize'
//    }, {
//        'buffer': 1
//    });
    
    //map.addLayer(layerClicktrace_modtile);
    
    var layerTah = new OpenLayers.Layer.TMS("T@H", "http://tah.dev.openstreetmap.org/Tiles/tile/", {
        type: 'png',
        getURL: get_osm_url,
        displayOutsideMaxExtent: true
    }, {
        'buffer': 1
    });
    
//    var tileCache = new OpenLayers.Layer.TMS("VMap0", "http://tile.clicktrace.nl/cgi-bin/tilecache.py?", {
//        layers: 'osm-map',
//        getURL: get_osm_url,
//        type: 'png'
//    });
    
    
    
    //var google = new OpenLayers.Layer.Google( "Google", { type: G_HYBRID_MAP } );
    
    // Add layers to map    
    map.addLayers([layerMapnik, layerMapnikNL, gmap, vectors]);
    
    // Center the map	
    //map.setCenter(new OpenLayers.LonLat(0, 0), 0);
    map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
		new OpenLayers.Projection("EPSG:4326"),
		map.getProjectionObject()
	), 5);

    // Add "markers" layer to existing map	
    mapMarkers = new OpenLayers.Layer.Markers("Markers", {
        type: 'txt',
        getURL: get_osm_url,
        buffer: 0
    });
    
    // Options for "markers" layer    
    mapMarkers.setIsBaseLayer(false);
    mapMarkers.setVisibility(true);
    
    map.addLayer(mapMarkers);
    mapMarkers.setZIndex(map.Z_INDEX_BASE['Popup'] - 1);
    // Bounds object    
    bounds = new OpenLayers.Bounds();
	// MiniMap.maximizeControl();
    
    // Finally retrieve the userdata, and give direction where to go when finished
    //
    var initFunctions = function(transport){
        var userData = eval(transport.responseText);
        var alarmOption = /a/.test(userData[0].Options);
        var geofenceOption = /g/.test(userData[0].Options);
        var highlightOption = /h/.test(userData[0].Options);
        user = new newUser(userData[0].UserID, userData[0].Name, userData[0].Email, userData[0].Phonenumber, alarmOption, geofenceOption, highlightOption);
        optionsSwitch(user);
        retrieveIONames(user.id);
        retrieveGroupIONames(user.id);
        getMarkers(user.id, true, false, true);
        //	changeDivHeight();
    }
    user = retrieveUserID(initFunctions);
}

//-------------------------------------------------------------
// Start the init script
//-------------------------------------------------------------

// VIEWPORT

function changeDivHeight(){
    var myWidth = 0, myHeight = 0;
    if (typeof(window.innerHeight) == 'number') {
        //Non-IE
        //myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {
            //IE 6+ in 'standards compliant mode'
            //myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        }
        else 
            if (document.body && document.body.clientHeight) {
                //IE 4 compatible
                //myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
    }
    var m = $('content').offsetTop;
    var h = document.documentElement.clientHeight - m;
    $('mainContainer').style.height = (h) + "px";
}


//function changeDivHeight(){
//    var m = $('content').offsetTop);
//    //var t = ($('toolbar').scrollHeight + $('toolbar').offsetTop);
//    //var b = document.body.scrollHeight;
//    var h = (document.documentElement.clientHeight - m);
//    $('mainContainer').style.height = (h) + "px";
//}

//
onload = changeDivHeight;
onresize = changeDivHeight

if (typeof window.addEventListener != "undefined") 
	window.addEventListener("load", init, false);
else {
	if (typeof window.attachEvent != "undefined") {
		window.attachEvent("onload", init);
	}
	else {
		if (window.onload != null) {
			var oldOnload = window.onload;
			window.onload = function(e){
				oldOnload(e);
				init();
			};
		}
		else {
			window.onload = init();
		}
	}
}


function ShowDialog(x){
    //get viewport's width and height
    vpWidth = self.innerWidth;
    vpHeight = self.innerHeight;
    
    //get dialog's width and height
    dialogWidth = x.offsetWidth;
    dialogHeight = x.offsetHeight;
    
    //calculate position
    dialogTop = (vpHeight / 2) - (dialogHeight / 2);
    dialogLeft = (vpWidth / 2) - (dialogWidth / 2);
    
    
    //Position the Dialog
    x.style.top = dialogTop + "px";
    x.style.left = dialogLeft + "px";
    
    a = x.style.display = "block";
}