var isMouseDown = false;
var isDragging = false;

var coordinates;
var areas = new Array();
var mapLayers = new Array();
var trackLayers = new Array();
var localPois = new Array();
var availableScales = [5000, 10000, 25000, 50000, 100000, 200000, 250000, 500000, 1000000, 2500000, 5000000, 7500000, 10000000];
var scale = 2500000;

var lock = false;
var loading = false;
var fireSliceLoad = false;

var firstLoad = true;
var downloadPrepared = false;
var infoCurrent = -1;
var idInterval = -1;
var scrollStarted = 0;

var overlayWidth = 550;
var overlayHeight = 550;

var sliderKnobWidth = 5; 
var sliderKnobPosition = 0;
var poiCounter = 0;


var slices = ["0", "0", "0", "0", "0", "0", "0", "0", "0"];
var sessionID = "";

function onStart()
{
    if (document.images)
    {
        var img1 = new Image();
        img1.src = "slike/menuhighlight.jpg";

        var img2 = new Image();
        img2.src = "slike/titlebar-highlight.gif";
        
        var img3 = new Image(1,1);
        img3.src = "semitransparent.png";  
        
        var img4 = new Image(); 
        img4.src = "transparentpixel.gif";
        
        var img5 = new Image(); 
        img5.src = "/slike/blank.gif";
    }
    
    initNews();
    printNews();
  
    handleBarClick('barintro');
    checkStatus();
    setOverlay();

}

function highlightMenu(m, doHighlight)
{
    var box = document.getElementById(m);
    if (box)
    {
	    if (doHighlight)
		    box.style.backgroundImage = "url('slike/menuhighlight.jpg')";	
        else
		    box.style.backgroundImage = '';	
	}
}


function highlightBar(m, doHighlight)
{
    var box = document.getElementById(m);
    if (box)
    {
	    if (doHighlight)
		    box.style.backgroundImage = "url('slike/titlebar-highlight.gif')";	
        else
		    box.style.backgroundImage = "url('slike/titlebar.gif')";	
	}
}

function setOverlay()
{
	
	var screenWidth = window.screen.width;
	
	
    var mapBlock = document.getElementById("frame");
    var overlayBlock = document.getElementById("Overlay");
    var tableBlock = document.getElementById("MapTable");
    var progressBlock = document.getElementById("ProgressBlock");
    var crosshairBlock = document.getElementById("Crosshair");
    var infoBlock = document.getElementById("InfoBlock");
    var toolbarBlock = document.getElementById("Toolbar");
    
    
    if (screenWidth > 1050)
	{
		overlayWidth = 700;
		overlayHeight = 620;
		
		mapBlock.style.width = overlayWidth + "px";	
		mapBlock.style.height = overlayHeight + "px";
		overlayBlock.style.width = overlayWidth + "px";
		overlayBlock.style.height = overlayHeight + "px";
		
		var wOffset = (overlayWidth - 750) / 2;
		var hOffset = (overlayHeight - 750) / 2;
		
		tableBlock.style.left = wOffset + "px";
		tableBlock.style.top = hOffset + "px";
		
		crosshairBlock.style.left = (overlayWidth / 2 - 7) + "px";
		crosshairBlock.style.top = (overlayHeight / 2 - 7) + "px";
	}
    
    var mapPosition = findPosition(mapBlock, false);
	

	overlayBlock.style.left = mapPosition[0];
	overlayBlock.style.top = mapPosition[1];
	overlayBlock.style.visibility = "visible";
	
	toolbarBlock.style.left = mapPosition[0] + 3;
	toolbarBlock.style.top = mapPosition[1] + 3;
	toolbarBlock.style.visibility = "visible";
	
	
	var overlayCenterX = mapPosition[0] + overlayBlock.offsetWidth / 2;
	var overlayCenterY = mapPosition[1] + 100;

	progressBlock.style.left = overlayCenterX - progressBlock.offsetWidth / 2;
	progressBlock.style.top = overlayCenterY - progressBlock.offsetHeight / 2;
	
	infoBlock.style.left = mapPosition[0] + overlayBlock.offsetWidth - 210 - 3;
	infoBlock.style.top = mapPosition[1] + 3;


	
}

function checkStatus()
{
        
    var xmlHttp = false;
	
	if(window.ActiveXObject)
    {
    	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
    	xmlHttp=new XMLHttpRequest();
    } 	
	
	//xmlHttp.open("GET", "Info.ashx?check=true" , true); 
	//xmlHttp.onreadystatechange = function(){acceptStatus(xmlHttp)}; 
	//xmlHttp.send(null);

}

function acceptStatus(xmlHttp)
{

    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {            
            var isReady = xmlHttp.responseXML.getElementsByTagName("ready")[0].childNodes[0].nodeValue;
            if (isReady == "yes")
            {
                load();
                //readTracks(false);
            }
            else
            {
                var message = xmlHttp.responseXML.getElementsByTagName("message")[0].childNodes[0].nodeValue;
                document.getElementById("ProgressMessage").innerHTML = message;
                document.getElementById("ProgressBlock").style.visibility = "visible";
                checkStatus();
            }
        }
    }
}


function doDoubleClick(event)
{
    
    var map = document.getElementById("MapTable"); 
    var box = document.getElementById("Overlay");
    
    var cds = findPos(box);    
    var coords = [event.clientX - cds[0] - map.offsetLeft, event.clientY - cds[1] - map.offsetTop];
    
    var i=0;
    for(i=0;i<areas.length;i++)
    {
        if (contains(areas[i][0], coords[0], coords[1]))
        {
            zoomInObject(areas[i][2], areas[i][3]);
            return;
        }
    }
}

function doMouseDown(event)
{
	coordinates = [event.clientX, event.clientY];
	isMouseDown = true;
}

function doMouseUp(event)
{


	if(isDragging)
	{	
		var overlay = document.getElementById("Overlay");
		overlay.style.cursor = "default";
		
		if (checkOut())
		{		
			loadImage("Display.ashx?scale=" + scale);
		}
	}
	else if (isSliding || isSliderDown)
	{
		doSliderUp(event);
	}
	 
	isDragging = false; 
	isMouseDown = false;
}



function doMouseExit(event)
{
	coordinates = null;
	hideInfo();
}



function doMove(event)
{
    if (!loading)
    {
	    if(isMouseDown)
	    {
	         hideInfo()	
		     if(!coordinates)
		     {
			    coordinates = [event.clientX, event.clientY];
			    
		     }
		     var offset = [event.clientX - coordinates[0], event.clientY - coordinates[1]];
    	
		     doShift(offset);
		     coordinates = [event.clientX, event.clientY];
	    }
	    else
	    {
            if (!lock)
            {
                var box = document.getElementById("Overlay");                     
                var cds = findPos(box);
                
                
                var map = document.getElementById("MapTable");            
                var coords = [event.clientX - cds[0] - map.offsetLeft, event.clientY - cds[1] - map.offsetTop];
              
                
                var found = 0;
                var i=0;    
                for(i=0;i<areas.length;i++)
                {
                    if (contains(areas[i][0], coords[0], coords[1]))
                    {
                        found = 1;
                        if (infoCurrent != i)
                        {
                            infoCurrent = i;
                            focusName = areas[i][1];

                            var nameData = areas[i][1];
                            var data = areas[i][4];
                            var category = areas[i][6];
                            
                            if (data == "No info yet." && scale > 25000)
                            {
                                found = 0;
                            }
                                     
                            showInfo(nameData, data, category, event.clientX, event.clientY);

		            
                            
                            
                        }
                        
                        if (found == 1)
                            return;
                    }
                }
                
                hideInfo();
            }
	    }
	}
}

function doShift(offset)
{
    
    isDragging = true;
	var map = document.getElementById("MapTable");
	map.style.left = map.offsetLeft + offset[0];
	map.style.top = map.offsetTop + offset[1];


	var overlay = document.getElementById("Overlay");
	overlay.style.cursor = "move";
}


function checkOut()
{
	var map = document.getElementById("MapTable");
    var overlay = document.getElementById("Overlay");

	var area = new Array();
    area[0] = map.offsetLeft;
    area[1] = map.offsetTop;
    area[2] = map.offsetWidth;
    area[3] = map.offsetHeight;

	if (!contains(area, 0, 0) | !contains(area, overlay.offsetWidth, overlay.offsetHeight))
	{
		return true;
	}
	else
	{
		return false;
	}
}


function findCenterOffset()
{
	var map = document.getElementById("MapTable");
    	var overlay = document.getElementById("Overlay");
	var mapCenterX = map.offsetLeft + map.offsetWidth / 2;
	var mapCenterY = map.offsetTop + map.offsetHeight / 2;

    	var overlayCenterX = overlay.offsetWidth / 2;
	var overlayCenterY = overlay.offsetHeight / 2;
	
	return [overlayCenterX - mapCenterX, mapCenterY - overlayCenterY];
        
}


function centerMap()
{
	var map = document.getElementById("MapTable");
    var overlay = document.getElementById("Overlay");
	
    var overlayCenterX = overlay.offsetWidth / 2;
	var overlayCenterY = overlay.offsetHeight / 2;

	map.style.left = overlayCenterX - map.offsetWidth / 2;
	map.style.top = overlayCenterY - map.offsetHeight / 2;
}


function loadImage(url)
{
    if (!loading)
    {
	hideInfo();
        loading = true;
        
        var offset = findCenterOffset();

        document.getElementById("MapTable").style.visibility = "hidden";
        
        document.getElementById("ProgressMessage").innerHTML = "Loading map ...";
        document.getElementById("ProgressMessage").style.visibility = "visible";
        document.getElementById("Progress").style.visibility = "visible";
        document.getElementById("ProgressBlock").style.visibility = "visible";
        
        var imageUrl = url + "&rand=" + Math.floor(Math.random()*100000) + "&shiftX=" + offset[0] + "&shiftY=" + offset[1];
        
        
        fireSliceLoad = false;
        document.getElementById("Map1").src = "transparentpixel.gif";
        document.getElementById("Map2").src = "transparentpixel.gif";
        document.getElementById("Map3").src = "transparentpixel.gif";
        document.getElementById("Map4").src = "transparentpixel.gif";
        document.getElementById("Map5").src = "transparentpixel.gif";
        document.getElementById("Map6").src = "transparentpixel.gif";
        document.getElementById("Map7").src = "transparentpixel.gif";
        document.getElementById("Map8").src = "transparentpixel.gif";
                       
        document.getElementById("Map").src = imageUrl;
    }
}

function loadSlices()
{
    
    slices[0] = "1";
    var i=0;
    for (i=1;i<slices.length;i++)
    {
       slices[i] = "0";   
    }
    
    
    centerMap();
    fireSliceLoad = true; 
  
    document.getElementById("Map1").src = "Display.ashx?image=1" + "&rand=" + Math.floor(Math.random()*100000);
    document.getElementById("Map2").src = "Display.ashx?image=2" + "&rand=" + Math.floor(Math.random()*100000);
    document.getElementById("Map3").src = "Display.ashx?image=3" + "&rand=" + Math.floor(Math.random()*100000);    
    document.getElementById("Map4").src = "Display.ashx?image=4" + "&rand=" + Math.floor(Math.random()*100000);        
    document.getElementById("Map5").src = "Display.ashx?image=5" + "&rand=" + Math.floor(Math.random()*100000);    
    document.getElementById("Map6").src = "Display.ashx?image=6" + "&rand=" + Math.floor(Math.random()*100000);    
    document.getElementById("Map7").src = "Display.ashx?image=7" + "&rand=" + Math.floor(Math.random()*100000);    
    document.getElementById("Map8").src = "Display.ashx?image=8" + "&rand=" + Math.floor(Math.random()*100000);    

 
    document.getElementById("MapTable").style.visibility = "visible";
	
}

function loadSliceOver(index)
{

	if (fireSliceLoad)
	{
	    slices[index] = "1";
	    
	    var doFinish = "1";
	    var i=0;
	    for (i=0;i<slices.length;i++)
	    {         
	       if (slices[i] == "0")
	       {            
	            doFinish = "0";
	       }
	    }
	        
	    
	    if (doFinish == "1")
	    {	    	
	        lookupData();
	    }
    }
}


function contains(area, xVal, yVal)
{

    var x = parseInt(xVal);
    var y = parseInt(yVal);
        
    var left = parseInt(area[0]);
    var right = parseInt(area[2]) + left;
    
    var top = parseInt(area[1]);
    var bottom = parseInt(area[3]) + top;

            
    if (x>=left && x<=right && y>=top && y<=bottom)
        return true;        
    else
        return false;
}


function findPos(obj) 
{
    return findPosition(obj, true);
}

function findPosition(obj, includeScroll) 
{
	var curleft = curtop = 0;
    if (obj.offsetParent) 
    {
	    do 
	    {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
	    } 
        while (obj = obj.offsetParent);
    }
    
    if (includeScroll == true)
    {
    
        var scrLeft = findLeftScroll();
        var scrTop = findTopScroll();
        
        curtop -= scrTop;
        curleft -= scrLeft;
    }
    
    return [curleft,curtop];

}


function zoomInObject(longitude, latitude)
{
    var newScale = availableScales[0];
    var i=0;
    for(i=0;i<availableScales.length;i++)
    {
        if (availableScales[i]<scale)
            newScale = availableScales[i];
    }  
    loadImage("Display.ashx?show=" + longitude + "," + latitude + "," + newScale);
    
}

function zoomIn()
{
    var newScale = availableScales[0];
    var i=0;
    for(i=0;i<availableScales.length;i++)
    {
        if (availableScales[i]<scale)
            newScale = availableScales[i];
    }
    loadImage("Display.ashx?scale=" + newScale);
}

function zoomOut()
{
    var newScale = availableScales[availableScales.length-1];
    var i=0;
    for(i=availableScales.length-1;i>=0;i--)
    {
        if (availableScales[i]>scale)
            newScale = availableScales[i];
    }
    loadImage("Display.ashx?scale=" + newScale);
}

function show(longitude, latitude, scale)
{
    var newScale = availableScales[0];
    var i=0;
    for(i=0;i<availableScales.length;i++)
    {
        if (availableScales[i] <= scale)
            newScale = availableScales[i];
    }  

    loadImage("Display.ashx?show=" + longitude + "," + latitude + "," + newScale);    
}

function showLink(type, longitude, latitude, scale)
{  
    loadImage("Display.ashx?type=" + type + "&show=" + longitude + "," + latitude + "," + scale);    
}


function load()
{
    loadImage("Display.ashx?");
}

function reload()
{
    loadImage("Display.ashx?scale=" + scale);
}

function fit()
{
    loadImage("Display.ashx?action=default");
}

function removeUserTrack(trackId)
{
    loadImage("Display.ashx?removeTrack=" + trackId);
}

function toggleCyrillic()
{
    var alphabet = document.getElementById("Cyrillic").value;
    loadImage("Display.ashx?toggleCyrillic=" + alphabet);
}

function setQuality()
{
    var quality = document.getElementById("QualitySelect").value;
    loadImage("Display.ashx?quality=" + quality);
}

function setStyle()
{
    var style = document.getElementById("StyleSelect").value;
    loadImage("Display.ashx?setStyle=" + style);
}

function setMargin()
{
    var margin = document.getElementById("MarginSelect").value;
    loadImage("Display.ashx?setMargin=" + margin);
}

function setStep()
{
    var step = document.getElementById("StepSelect").value;
    loadImage("Display.ashx?setStep=" + step);
}

function setScale()
{
    var s = document.getElementById("ScaleSelect").value;
    loadImage("Display.ashx?scale=" + s);
}

function setLayers()
{
    var visibilityCommand = "";
    var i=0;
    for (i=0;i<mapLayers.length;i++)
    {       
        var idLayer = "dataLayer" + i;      
        visibilityCommand += document.getElementById(idLayer).checked ? "1" : "0";
    }  
    loadImage("Display.ashx?layers=" + visibilityCommand);
}


function createRect(x, y, width, height, label, longitude, latitude, data, id, category)
{
    var area = new Array();
    area[0] = x;
    area[1] = y;
    area[2] = width;
    area[3] = height;
    
    var info = new Array();
    info[0] = area;
    info[1] = label;
    info[2] = longitude;
    info[3] = latitude;
    info[4] = data;
    info[5] = id;
    info[6] = category;
    
    return info;
}

function lookupData()
{
        

    document.getElementById("ProgressMessage").innerHTML = "Fetching info ...";


    var xmlHttp = false;
	
	if(window.ActiveXObject)
    {
    	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
    	xmlHttp=new XMLHttpRequest();
    } 	
	
	var dataUrl = "Info.ashx?rand=" + Math.floor(Math.random()*100000);
	xmlHttp.open("GET", dataUrl, true); 
	xmlHttp.onreadystatechange = function(){acceptData(xmlHttp)}; 
	xmlHttp.send(null);

}



function acceptData(xmlHttp)
{

    areas = new Array();
    userLayers = new Array();
    
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var box1 = document.getElementById("test");


            var ars = xmlHttp.responseXML.getElementsByTagName("area");

            var i=0;
            for (i=0;i<ars.length;i++)
            { 
                var info = ars[i];  
                var rect = info.getElementsByTagName("rect")[0].childNodes[0].nodeValue;
                var label = info.getElementsByTagName("label")[0].childNodes[0].nodeValue;
                var category = info.getElementsByTagName("ctg")[0].childNodes[0].nodeValue;
                
                var data = info.getElementsByTagName("info")[0].childNodes[0].nodeValue;
                var center = info.getElementsByTagName("center")[0].childNodes[0].nodeValue;
                var id = info.getElementsByTagName("id")[0].childNodes[0].nodeValue;
                
                var dimensions = rect.split(",");
                var coordinates = center.split(",");
                var r = createRect(dimensions[0], dimensions[1], dimensions[2], dimensions[3], label, coordinates[0], coordinates[1], data, id, category);

                areas[i] = r;
            }
            
            var layers = xmlHttp.responseXML.getElementsByTagName("layers")[0].childNodes;
            var extraLayers = xmlHttp.responseXML.getElementsByTagName("extraLayers")[0].childNodes;
            
            var newScale = xmlHttp.responseXML.getElementsByTagName("scale")[0].childNodes[0].nodeValue;
            scale = newScale;
            document.getElementById("ScaleSelect").value = scale;
            adjustSlider();
            
            
            var isCyrillic = xmlHttp.responseXML.getElementsByTagName("cyrillic")[0].childNodes[0].nodeValue;
            document.getElementById("Cyrillic").value = isCyrillic;
                        
            var display = xmlHttp.responseXML.getElementsByTagName("quality")[0].childNodes[0].nodeValue;
            document.getElementById("QualitySelect").value = display;            
            
            var style = xmlHttp.responseXML.getElementsByTagName("style")[0].childNodes[0].nodeValue;
            document.getElementById("StyleSelect").value = style;
            
            sessionID = xmlHttp.responseXML.getElementsByTagName("session")[0].childNodes[0].nodeValue;
                        
                        
            
            
            mapLayersNumber = layers.length;
            var mapLayersText = "<div class=boxtitle style='margin-top: 1px; margin-bottom: 4px;'>Layers</div>";
            var i=0;
            for (i=0;i<layers.length;i++)
            {
                var layerData = layers[i];
                var layerId = layerData.getAttribute("id");
                var layerName = layerData.getAttribute("name");
                var layerVisibility = layerData.getAttribute("visible");
                var layerCategory = layerData.getAttribute("category");
                var layerShared = layerData.getAttribute("shared");

                mapLayers[i] = [layerId, layerName, layerVisibility, layerCategory, layerShared];
                mapLayersText += "<p style='margin:0px;' class=smalltext><input type=checkbox id=layer" + i + " value=1 " + (layerVisibility==1?" checked" : "" )+ "> " + layerName ;
            }
                                       
		
		    for (i=0;i<layers.length;i++)
            {
                var layerData = layers[i];
                var layerId = layerData.getAttribute("id");
                var layerName = layerData.getAttribute("name");
                var layerVisibility = layerData.getAttribute("visible");
                var layerCategory = layerData.getAttribute("category");
                var layerShared = layerData.getAttribute("shared");
                
                mapLayers[i] = [layerId, layerName, layerVisibility, layerCategory, layerShared];
                
                updateLayers(i, layerName, layerCategory, layerVisibility);
            }
		

            var lyr = document.getElementById("MapLayers");
            lyr.innerHTML = writeLayers(); 
            
                        
            
            loading = false;
            document.getElementById("Progress").style.visibility = "hidden";
            document.getElementById("ProgressMessage").style.visibility = "hidden";
            document.getElementById("ProgressBlock").style.visibility = "hidden";


            //doCount();
            
        }
        else
        {
            loading = false;
            document.getElementById("Hint").innerHTML = xmlHttp.statusText;
        }
        
        
            
        
    }
}


function doCount()
{
	var visitCounter = document.getElementById("counter");
	if (visitCounter)
	{
		visitCounter.style.visibility = "hidden";
		var extension = "?rand=" + Math.floor(Math.random()*100000);
		var counterLink = "<img width='1' height='1' src='http://c.statcounter.com/4488742/0/4a7c459d/1/" + extension + "' alt='myspace visitor counter' border=0>";
		visitCounter.innerHTML = counterLink;
	}
}


function createMap()
{
    var offset = findCenterOffset();
    
    var margin = document.getElementById("MapMargin").value;
    var size = document.getElementById("MapSize").value;
    
    var url = "map.html?" + "shiftX="+ offset[0] + "&shiftY=" + offset[1] + "&setMargin=" + margin + "&size=" + size;    

	var newwindow = window.open(url,"Map",'location=no,resizable=yes,scrollbars=yes');
	if (window.focus)
	{
	    newwindow.focus()
	}
}





var scrollPosition = 0;
var startCounter = 0;

function stopInfoTimer()
{
    if (idInterval != -1)
    {
	    window.clearInterval(idInterval);
        idInterval = -1;
        scrollStarted = 0;
    }
}

function hideInfo()
{
    if (idInterval != -1)
    {
	    window.clearInterval(idInterval);
        idInterval = -1;
        scrollStarted = 0;
    }

    scrollPosition = 0;
    startCounter = 0;
    infoCurrent = -1;
    var infoBox = document.getElementById("InfoBlock");
    infoBox.style.visibility = "hidden";
}


function checkCategory(category)
{
    for (var i=0;i<mapLayers.length;i++)
    {
        if (mapLayers[i][1] == category && mapLayers[i][4] == "1")
        {
            return true;
        }
    }
    return false;
}


function showInfoBox(name, category, data)
{
    
    var infodata = data.length == 0 ? "No info yet" : unescape(data);
    infoCurrent = 0;                                                                                                                     
    showInfo(unescape(name), infodata, unescape(category), 1, 1);
}

function showPoiData(i)
{
    hideInfo();
    if (i<localPois.length)
    {
	var poiData = localPois[i];
	var data = poiData[2];
        var category = poiData[1];
        var name = poiData[0];   

    	var infodata = data.length == 0 ? "No info yet" : unescape(data);
    	infoCurrent = 0;                                                                                                                     
    	showInfo(unescape(name), infodata, unescape(category), 1, 1);
    }
}

function showInfo(nameData, data, category, x, y)
{
    var applyExtraFormat = checkCategory(category);
    
    var infoBox = document.getElementById("InfoBlock");
    var infoBoxData = document.getElementById("InfoBlockData");
    var infoBoxName = document.getElementById("InfoBlockName");
    var infoBoxFrame = document.getElementById("InfoBlockFrame");
    
    var overlayBox = document.getElementById("Overlay");                     
    var cds = findPos(overlayBox);
    
    var infoPosition = 0;
    if (x - cds[0] > overlayWidth - infoBox.offsetWidth && y - cds[1] < 120)
    {
        infoPosition = 1;
    }
    
    
    var paragraphNumber = data.split("\n");
    var textLength = data.length;
    
    infoBoxName.innerHTML = nameData;
    
    var infoHeight = 85;
    
    var categoryText = "";
    if (category != "None")
    {
        categoryText = "<font color='ECE792'>" + category + "</font><p style='margin-top:3px'>";
    }
    
    infoBoxData.innerHTML = categoryText + data.replace("\n","<p>");
    if (data == "No info yet.")
    {
        if (scale <= 25000)
        {
            scrollPosition = 0;
            infoBoxData.style.top = scrollPosition + "px";
            infoHeight = 32;                                    
            infoBoxFrame.style.height = "32px";
            if (infoPosition == 1)
            {
                infoBox.style.left = cds[0] + overlayBox.offsetWidth - infoBox.offsetWidth - 3;
	            infoBox.style.top = cds[1] + overlayBox.offsetHeight - infoHeight - 30;
            }
            else
            {
                infoBox.style.left = cds[0] + overlayBox.offsetWidth - infoBox.offsetWidth - 3;
	            infoBox.style.top = cds[1] + 3;
            }
            infoBox.style.visibility = "visible";
        }
    }
    else
    {
        scrollPosition = 0;
        infoBoxData.style.top = scrollPosition + "px";
        infoBox.style.height = "";
        infoHeight = 85;
        infoBoxFrame.style.height = "85px";
        if (infoPosition == 1)
        {
            infoBox.style.left = cds[0] + overlayBox.offsetWidth - infoBox.offsetWidth - 3;
            infoBox.style.top = cds[1] + overlayBox.offsetHeight - infoHeight - 30;
        }
        else
        {
            infoBox.style.left = cds[0] + overlayBox.offsetWidth - infoBox.offsetWidth - 3;
            infoBox.style.top = cds[1] + 3;
        }
        infoBox.style.visibility = "visible";
        
        if (paragraphNumber > 2 || textLength > 150)
        {
            animateStart();   
        }
    }
}

function animateStart()
{
    scrollPosition = 0;
    startCounter = 0;
    if (scrollStarted == 0)
    {
        idInterval = setInterval("animateUp()", 140);
        scrollStarted = 1;
    }
}

function animateUp()
{
    if (infoCurrent > -1)
    {
        if (startCounter < 20)
            startCounter++;
            
        var infoBox = document.getElementById("InfoBlockData");
        var infoBoxFrame = document.getElementById("InfoBlockFrame");

        if (infoBox.innerHTML == "No info yet.")
        {
            scrollPosition = 0;
        }        
        else
        {
            if (startCounter < 20)
            {
                scrollPosition = 0;
            }
            else
            {
                var currentHeight = infoBox.offsetHeight;
                
                if (scrollPosition < (-1) * currentHeight)
                {
                    scrollPosition = parseInt(infoBoxFrame.style.height);
                }
                else
                {
                    scrollPosition = scrollPosition - 1;    
                }
            }
        }
        infoBox.style.top = scrollPosition + "px";        
    }
}


//
//
// Upload section

function openUpload()
{

    var width  = 400;
    var height = 180;
    var left   = (screen.width  - width)/2;
    var top    = (screen.height - height)/2;
    var params = 'width=' + width + ', height=' + height;
    params += ', top=' + top + ', left=' + left;
    params += ', status=no, toolbar=no, resizable=no, location=no';

    var uploadWindow = window.open('Upload.aspx', 'uploadWindow', params);
    if (window.focus)
        uploadWindow.focus();    
}


function readLocalPoi()
{

    var xmlPoi = false;
	
    if(window.ActiveXObject)
    {
    	xmlPoi = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
    	xmlPoi = new XMLHttpRequest();
    } 	
	
	poiCounter++;
	var doFullShuffle = poiCounter % 3 == 0 ? "true" : false;	


	var dataUrl = "Info.ashx?poi=true&resultNumber=3&doFullShuffle=" + doFullShuffle + "&rand=" + Math.floor(Math.random()*100000);
	xmlPoi.open("GET", dataUrl, true); 
	xmlPoi.onreadystatechange = function(){acceptLocalPoi(xmlPoi)}; 
	xmlPoi.send(null);
}

function acceptLocalPoi(xmlPoi)
{

    
    if(xmlPoi.readyState==4)
    {
	localPois = new Array();
        var poiText = ""; 

        if(xmlPoi.status==200)
        {

            var pois = xmlPoi.responseXML.getElementsByTagName("pois")[0].childNodes;
            var k = 0;
            for (k=0 ; k<pois.length ; k++)
            {
                var poiData = pois[k];
                var poiName = poiData.getAttribute("name");
                var poiFocus = poiData.getAttribute("focus");
		var poiType = poiData.getAttribute("type");
		var poiInfo = poiData.getAttribute("info");
                
		localPois[k] = [poiName, poiType, poiInfo];

		poiText += "<table cellpadding=0 cellspacing=0 style='margin-bottom:3px'><tr>";
		poiText += "<td><img src=slike/poi/" + getIcon(poiType) + "></td>";
		poiText += "<td class=text style='padding-left:4px'>";
                poiText += "<a class=text href=javascript:show(" + poiFocus + ")>" + poiName + "</a>";		
		poiText += "<div style='color:#888888'>" + poiType + " &middot; " +  "<a class=text style='color:#888888;text-decoration:none' href=javascript:showPoiData('" + k + "')>More info ...</a>" +"</div>"
		poiText += "</td></tr></table>";
            }


	    if (pois.length == 0)
	    {                		    
		poiText = "<div class=text align=center>No near points.</div>"
	    }
        }
        else
        {

        }

	var poiBox = document.getElementById("LocalPoi");
	if (poiBox)
	{
		poiBox.innerHTML = poiText;
	}
        
                            
    }   
}

function getIcon(poiType)
{
	if (poiType == "Hospitals")
	{
		return "hospitals.gif";
	}
        else if (poiType == "Restaurants")
	{
		return "restaurants.gif";
	}
	else if (poiType == "Clubs")
	{
		return "clubs.gif";
	}
	else if (poiType == "Monasteries")
	{
		return "monasteries.gif";
	}
	else if (poiType == "Banks")
	{
		return "banks.gif";
	}
        else if (poiType == "Peaks")
	{
		return "peaks.gif";
	}
        else if (poiType == "Monuments")
	{
		return "monuments.gif";
	}
        else if (poiType == "Theatre")
	{
		return "theatre.gif";
	}
        else if (poiType == "Religious")
	{
		return "religious.gif";
	}
        else if (poiType == "Post office")
	{
		return "envelope.gif";
	}
        else if (poiType == "Camping")
	{
		return "camping.gif";
	}
        else if (poiType == "Fortress")
	{
		return "fortress.gif";
	}
        else if (poiType == "Museums")
	{
		return "museum.gif";
	}
        else if (poiType == "Diplomatic")
	{
		return "diplomatic.gif";
	}
        else if (poiType == "Hotels")
	{
		return "hotels.gif";
	}
        else if (poiType == "Battles")
	{
		return "battles.gif";
	}
        else if (poiType == "Industry")
	{
		return "industry.gif";
	}
        else if (poiType == "Sport")
	{
		return "sport.gif";
	}
        else if (poiType == "Spa")
	{
		return "spa.gif";
	}
        else if (poiType == "Bus stations")
	{
		return "bus.gif";
	}
        else if (poiType == "Government")
	{
		return "government.gif";
	}
        else if (poiType == "National parks")
	{
		return "parks.gif";
	}
        else if (poiType == "FireDepartment")
	{
		return "firedepartment.gif";
	}
        else if (poiType == "Caves")
	{
		return "caves.gif";
	}
        else if (poiType == "Green markets")
	{
		return "greenmarkets.gif";
	}
        else if (poiType == "Airports (civil)")
	{
		return "airports.gif";
	}
        else if (poiType == "Mines")
	{
		return "mines.gif";
	}
        else if (poiType == "Education" || poiType == "University")
	{
		return "education.gif";
	}	
	else
	{
		return "poi.gif";	
	}
}


function readTracks(focusLast)
{

    var xmlHttpTracks = false;
	
	if(window.ActiveXObject)
    {
    	xmlHttpTracks = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
    	xmlHttpTracks = new XMLHttpRequest();
    } 	
	
	var dataUrl = "Info.ashx?tracks=true&rand=" + Math.floor(Math.random()*100000);
	xmlHttpTracks.open("GET", dataUrl, true); 
	xmlHttpTracks.onreadystatechange = function(){acceptTracks(xmlHttpTracks, focusLast)}; 
	xmlHttpTracks.send(null);
}

function acceptTracks(xmlHttpTracks, focusLast)
{

    trackLayers = new Array();
    if(xmlHttpTracks.readyState==4)
    {
        if(xmlHttpTracks.status==200)
        {

	        

            var layersTrk = xmlHttpTracks.responseXML.getElementsByTagName("layers")[0].childNodes;
            var k = 0;
            for (k=0 ; k<layersTrk.length ; k++)
            {
                var layerData = layersTrk[k];
                var layerId = layerData.getAttribute("id");
                var layerName = layerData.getAttribute("name");
                var layerFocus = layerData.getAttribute("focus");
                
                var calculatedFocus = calculateFocus(layerFocus);
		trackLayers[k] = [layerId, layerName, calculatedFocus];

		
            }                		    
        }
        else
        {

        }
        
        writeTracks();
        
        if (focusLast)
        {
            var index = trackLayers.length - 1;
            if (index > -1)
            {
                var layerFocus = trackLayers[index][2];
                show(layerFocus);
            }
        }                     
    }   
}


function calculateFocus(focus)
{
    var words = focus.split(",");
    var sc = parseInt(words[2]);
    
    
    var newScale = availableScales[availableScales.length-1];
    var cnt = 0;
    for(cnt=availableScales.length-1; cnt>=0; cnt--)
    {
        if (availableScales[cnt]>sc)
            newScale = availableScales[cnt];
    }
    
    return words[0] + "," + words[1] + "," + newScale;
    
}



function writeTracks()
{
    var tracksBox = document.getElementById("UserTracks");
    
    var textTracks = "";
    
    var i=0;
    for (i=0;i<trackLayers.length;i++)
    {        
        var layerId = trackLayers[i][0];
        var layerName = trackLayers[i][1];
        var layerFocus = trackLayers[i][2];

        if (layerName.length > 22)
        {
            layerName = layerName.substring(0, 22) + "...";
        }
        
        textTracks += "<p class=text>" + parseInt(i+1) + ". " +  layerName;
        textTracks += "<br> &nbsp; <a class=smalltext style='color:#888888' href=javascript:show(" + layerFocus + ")>View</a> &nbsp;<a class=smalltext style='color:#888888' href=javascript:removeTrack('" + layerId + "')>Delete</a>";
        textTracks += "<img height=1 width=1 align=bottom border=0 src=img/empty.gif>";
    }
    
    
    tracksBox.innerHTML = textTracks;
}

function removeTrack(trackId)
{
    var newTracks = new Array();
    var cnt = 0;
    var i = 0;
    for (i=0;i<trackLayers.length;i++)
    {        
        var layerId = trackLayers[i][0];
        var layerName = trackLayers[i][1];
        var layerFocus = trackLayers[i][2];
        
        if (layerId != trackId)
        {
            newTracks[cnt] = [layerId, layerName, layerFocus];
            cnt++;
        }        
    }   
    
    trackLayers = newTracks;
    
    writeTracks();
    removeUserTrack(trackId);
}

//
// outlook bar
//


var current = null;

function collapse(item)
{	
	var itembox = document.getElementById(item);
		
	if (itembox)
	{
		itembox.style.display = "none";
	}
	
	var titlebox = document.getElementById(item + 'title');		
	if (titlebox)
	{
		titlebox.style.color = "#666666";
                titlebox.align = "left";
	
	}
}


function activate(item)
{	
	var itembox = document.getElementById(item);		
	if (itembox)
	{
		itembox.style.display = "block";
		current = item;
	}
	
	var titlebox = document.getElementById(item + 'title');		
	if (titlebox)
	{
		titlebox.style.color = "black";	
                titlebox.align = "center";	
	}
	
}

function handleBarClick(item)
{
	var itembox = document.getElementById(item);
	if (itembox)
	{
		var itemHeight = itembox.offsetHeight;	
		if (itemHeight < 3)
		{
			
			if (current != item)
			{
				collapse(current);	
			}
			activate(item);	
		}
		else
		{
			if (current != item)
			{
				collapse(item);
			}	
		}
		
		
	}	
}

function showItem(item)
{
    if (current != item)
	{
		collapse(current);
		activate(item);	
	}
}


//
// Mouse section
//

function findTopScroll()
{
    var ScrollTop = document.body.scrollTop;
    if (ScrollTop == 0)
    {

        if (window.pageYOffset)
            ScrollTop = window.pageYOffset;
        else
            ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }

    return ScrollTop;
}


function findLeftScroll()
{
    var ScrollLeft = document.body.scrollLeft;
    if (ScrollLeft == 0)
    {

        if (window.pageYOffset)
            ScrollLeft = window.pageXOffset;
        else
            ScrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
    }

    return ScrollLeft;
}


//
// List section
//


var dataLayers = [];

function Layer(id, name, category, visible)
{
    this.id = id;
    this.name = name;
    this.category = category;
    this.visible = visible;
}

function findLayer(name, category)
{
    for (i=0;i<dataLayers.length;i++)
    {
        if (dataLayers[i].name == name && dataLayers[i].category == category)
        {
            return dataLayers[i];
        }
    }
    return null;
}

function findCategory(category)
{
    var index = -1;
    for (i=0;i<dataLayers.length;i++)
    {
        if (dataLayers[i].category == category)
        {
            index = i;
        }
    }
    return index;
}

function updateLayers(id, name, category, visible)
{
    var layer = findLayer(name, category);
    if (layer == null)
    {
        var index = findCategory(category);
        if (index == -1)
        {
            dataLayers[dataLayers.length] = new Layer(id, name, category, visible);
        }
        else
        {
            var temp = [];
            for (i=0;i<=index;i++)
            {
                temp[i] = dataLayers[i];
            }
            
            temp[index+1] = new Layer(id, name, category, visible);
            
            for (i=index+1;i<dataLayers.length;i++)
            {
                temp[i+1] = dataLayers[i];
            }
            dataLayers = temp;
            
        }
    }
    else
    {
        layer.visible = visible;
    }
}


function writeLayers()
{
    var text = "<div class='infotext'>";
    
    var category = "";
    
    for (i=0;i<dataLayers.length;i++)
    {
        if (dataLayers[i].category != category)
        {
            category = dataLayers[i].category;
            text += "<div style='margin-top:8px'><b>" + category + "</b></div>";
        }
    
        text += "<div>";
        text += "<input type='checkbox' id=dataLayer" + dataLayers[i].id + " value='1' " + (dataLayers[i].visible==1 ? "checked" : "") + " />";
        text += dataLayers[i].name;
        text += "</div>";
    }
    
    text += "</div>"
    return text;
}


// Slider

var isSliderDown = false;
var isSliding = false;

function doSliderDown(event)
{
	if(event.preventDefault) 
	{
		  event.preventDefault(); 
	}

	if (!loading)
	{	
		isSliderDown = true;
	}
}

function limitSlider(sliderPosition)
{
	var sliderMaxWidth = availableScales.length * sliderKnobWidth;
	sliderPosition = Math.max(0, sliderPosition);	
	sliderPosition = Math.min(sliderMaxWidth - sliderKnobWidth, sliderPosition);	
	return sliderPosition;
}

function doSliderMove(event)
{
	if(event.preventDefault) 
	{
		  event.preventDefault(); 
	}
	
	if (!loading && isSliderDown)
	{
		var slider = document.getElementById("Slider");
		var cds = findPos(slider);
		var coords = [event.clientX - cds[0] - slider.offsetLeft, event.clientY - cds[1] - slider.offsetTop];
	
		var sliderPosition = coords[0];
		sliderPosition = Math.floor(sliderPosition / sliderKnobWidth) * sliderKnobWidth;
		
		var newPosition = limitSlider(sliderPosition);
		sliderKnobPosition = newPosition;
		
		
		var sliderKnob = document.getElementById("SliderKnob");    
    		if (sliderKnob)
    		{
    			sliderKnob.style.left = newPosition + "px";  	
    		}
    	
    		isSliding = true;	
	}
}

function doSliderUp(event)
{

	if(event.preventDefault) 
	{
		  event.preventDefault(); 
	}

    if (isSliding)
    {    	
		var sliderPosition = limitSlider(sliderKnobPosition);
		var zoomIndex = Math.floor(sliderPosition / sliderKnobWidth);
		zoomIndex = availableScales.length - 1 - zoomIndex;				
		var newScale = availableScales[zoomIndex];
		
		loadImage("Display.ashx?scale=" + newScale);
    }
	
	isSliderDown = false;
	isSliding = false;
	
}

function adjustSlider()
{
	var zoomIndex = 0;
	for(i=0;i<availableScales.length;i++)
	{
        	if (availableScales[i] == scale)
        	{
        		zoomIndex = i;
        	}
            
    }
    
    zoomIndex = availableScales.length - 1 - zoomIndex;
    var sliderKnob = document.getElementById("SliderKnob");
    var knobOffset = 5 * zoomIndex;
    
    if (sliderKnob)
    {
    	sliderKnob.style.left = knobOffset + "px";  	
    }
}