var mode = "default";
var x1 = null;
var y1 = null;
var x2 = null;
var y2 = null;  
  
var rect_top = 0;
var rect_left = 0;
var rect_height = 0;
var rect_width = 0;

// onmouseenter on tools of map
function mapOnTools(clickEvent)
{
    if (mode == "default")
    {
        mode = "ontool";
	    var compasDiv = document.getElementById("NavContainer");
	    var toolbarDiv = document.getElementById("NavToolbar");
	    compasDiv.className = "navContainer transOFF";
	    toolbarDiv.className = "navMenu transOFF";
    }
}

// onmouseleave off tools of map
function mapOffTools(clickEvent)
{
    if (mode == "ontool")
    {
	    var compasDiv = document.getElementById("NavContainer");
	    var toolbarDiv = document.getElementById("NavToolbar");
	    compasDiv.className = "navContainer transON";
	    toolbarDiv.className = "navMenu transON";
	    mode = "default";
    }
}

function mapOnPopup(clickEvent)
{
    mapOnTools(clickEvent);
}

function mapOffPopup(clickEvent)
{
    mapOffTools(clickEvent);
}
    
// onmousedown set startpoint
function startZooming(clickEvent)
{
	if (!clickEvent)
	    clickEvent = window.event;

	if (mode == "select")
	{
	    endZooming(clickEvent);
	}
	else if (mode == "default")
	{
        mode = "select";    
        if(document.all) 
        {
            if (clickEvent.srcElement.id == "TrafficMap")
            {
                x1 = window.event.offsetX;
                y1 = window.event.offsetY;
            }
        }
        else 
        {
            if (clickEvent.target.id == "TrafficMap")
            {
                x1 = clickEvent.layerX;
                y1 = clickEvent.layerY;
            }
        }
        x2 = x1;
        y2 = y1;
        rect_left = x1;
        rect_top = y1;
        rect_height = 0;
        rect_width = 0;
        paintRect();
        
        var overlay = document.getElementById("TrafficMap");
        for(var i=0;  i < overlay.childNodes.length; i++)
        {
            var node = overlay.childNodes[i];
            if((node.nodeName == "DIV") && (node.className != "MapZoomRect"))
            {
                node.style.display = 'none';
            }
        }
        overlay.focus();
	}  	    	
    
}

// onmousemove paint rectangle
function dragZooming(clickEvent)
{
	if (!clickEvent)
	    clickEvent = window.event;
		
    if(mode == "select")
    {
       if(document.all) 
        {
            if (clickEvent.srcElement.id == "TrafficMap")
            {
                x2 = window.event.offsetX;
                y2 = window.event.offsetY;
            }
            else if (clickEvent.srcElement.id == "ZoomRect")
            {
                x2 = window.event.offsetX + rect_left;
                y2 = window.event.offsetY + rect_top;
                
            }
        }
        else
        {
            if (clickEvent.target.id == "TrafficMap")
            {
                x2 = clickEvent.layerX;
                y2 = clickEvent.layerY;
            }
            else if (clickEvent.target.id == "ZoomRect")
            {
                x2 = clickEvent.layerX + rect_left;
                y2 = clickEvent.layerY + rect_top;
            }
        }
        // Links oben nach Rechts unten
        if(x1 < x2 && y1 < y2)
        {
            rect_left = x1;
            rect_top = y1;
            rect_width = x2 - x1;
            rect_height = y2 - y1;
        }
         // Links unten nach Rechts oben
        if(x1 < x2 && y1 > y2) 
        {
            rect_left = x1;
            rect_top = y2;
            rect_width = x2 - x1;
            rect_height = y1 - y2;
        }  
        // Rechts oben nach Links unten 
        if(x1 > x2 && y1 < y2) 
        {
            rect_left = x2;
            rect_top = y1;
            rect_width = x1 - x2;
            rect_height = y2 - y1;
        }   
        // Rechts unten nach Links oben    
        if(x1 > x2 && y1 > y2) 
        {
            rect_left = x2;
            rect_top = y2;
            rect_width = x1 - x2;
            rect_height = y1 - y2;
        } 
        paintRect(); 
        
    } 
}

// paint rectangle arround selected map-segment
function paintRect()
{    
    var zoom_rect = document.getElementById("ZoomRect");
    zoom_rect.style.left = rect_left + "px";
    zoom_rect.style.top = rect_top + "px";
    zoom_rect.style.width = rect_width + "px";
    zoom_rect.style.height = rect_height + "px";
    zoom_rect.style.display = "block";
}

function endZooming(clickEvent)
{
	if (!clickEvent)
	    clickEvent = window.event;

    if (mode == "select")
    {
       document.getElementById("ZoomRect").style.display = "none";
       if (rect_width > 0 || rect_height > 0)
       {
           mode = "load";
           var new_rect = rect_left + ";" + rect_top + ";" + rect_width + ";" + rect_height + ";";
           var hiddenField = document.getElementById(getHfID());
           if (hiddenField.value != new_rect)
           {
               hiddenField.value = new_rect;
               document.getElementById(getLoadButtonID()).click();
           }
       }
       var overlay = document.getElementById("TrafficMap");
       for(var i=0; i < overlay.childNodes.length; i++)
       {
           var node = overlay.childNodes[i];
           if((node.nodeName == "DIV") && (node.className != "MapZoomRect") && (node.className != "MapMessageDetail"))
           {
               node.style.display = 'block';
           }
       }
       mode = "default";
    }	
}

// highlight an traffic-icon on map
function showIcon(clickEvent, msgId)
{
    var msgDiv = document.getElementById("msg_" + msgId);
    msgDiv.className = "Message MessageHighlight";
    
    var divId = "div_" + msgId;
    var overlay = document.getElementById("TrafficMap");
    for(var i=0; i < overlay.childNodes.length; i++)
    {
        var node = overlay.childNodes[i];
        if((node.nodeName == "DIV") && (node.className == "MouseOverDiv") && (node.id == divId))
        {
            node.className = "MouseOverDiv MouseOverDivHighlight";
        }
    }
}

// remove highlight of traffic-icon on map
function hideIcon(clickEvent, msgId)
{
	if (!clickEvent)
	    clickEvent = window.event;

    var msgDiv = document.getElementById("msg_" + msgId);
    msgDiv.className = "Message";
    
    var divId = "div_" + msgId;
    var overlay = document.getElementById("TrafficMap");
    for(var i=0; i < overlay.childNodes.length; i++)
    {
        var node = overlay.childNodes[i];
        if((node.nodeName == "DIV") && (node.className == "MouseOverDiv MouseOverDivHighlight") && (node.id == divId))
        {
            node.className = "MouseOverDiv";
        }
    }
}

function showInfo(clickEvent, msgId)
{
	if (!clickEvent)
	    clickEvent = window.event;

    if (mode == "default")
    {
        mode = "info";
        var iconDiv = "";
        if(document.all) 
        {
            iconDiv = clickEvent.srcElement;
        }
        else
        {
            iconDiv = clickEvent.target;
        }
        iconDiv.className = "MouseOverDiv MouseOverDivMouseOver";
        var msgDiv = document.getElementById("msg_" + msgId);
        var overlayDiv = document.getElementById("MessageDetail");
        var mapDiv = document.getElementById("TrafficMap");
        
        overlayDiv.innerHTML = msgDiv.innerHTML;
        overlayDiv.style.display = "block";
        
        var mapWidth = mapDiv.style.width.replace("px", "");
        var mapHeight = mapDiv.style.height.replace("px", "");
        var msgWidth = overlayDiv.offsetWidth;
        var msgHeight = overlayDiv.offsetHeight;
        var iconWidth = iconDiv.offsetWidth;
        var iconHeight = iconDiv.offsetHeight;

        var offsetLeft;
        if ((iconDiv.offsetLeft + (iconWidth / 2)) > (mapWidth / 2))
        {
            offsetLeft = iconDiv.offsetLeft - msgWidth - 2;
        }
        else
        {
            offsetLeft = iconDiv.offsetLeft + iconWidth + 2; 
        }
        
        var offsetTop;
        if ((iconDiv.offsetTop + (iconHeight / 2)) > (mapHeight / 2))
        {
            offsetTop = iconDiv.offsetTop - msgHeight + iconHeight;
        }
        else
        {
            offsetTop = iconDiv.offsetTop;
        }
        
        overlayDiv.style.left = offsetLeft + "px";
        overlayDiv.style.top = offsetTop + "px";
    }
}

function hideInfo(clickEvent, msgId)
{
	if (!clickEvent)
	    clickEvent = window.event;

    if (mode == "info")
    {
        var iconDiv = "";
        if(document.all) 
        {
            iconDiv = clickEvent.srcElement;
        }
        else
        {
            iconDiv = clickEvent.target;
        }
        iconDiv.className = "MouseOverDiv";
        var overlayDiv = document.getElementById("MessageDetail");
        overlayDiv.style.display = "none";
        mode = "default";
    }
}