/* (c) 2005-2007 Ionut Nechita, www.alpinet.org, www.netimage.ro, TOATE DREPTURILE REZERVATE. 
       * Script pentru mapper-ul Alpinet, DHTML IE / Gecko / Opera 
       * v1.1 - suport pentru minimap
       * v1.2 - multilayer
       * v1.3 - tooltip imbunatatit
       */      
      var gPieceSize = 100;     
      var gMovingThreshold = 0;
      var gUsePixelResolution = true;     
      var map = null;
            
      function Mapper_ShowPiece()
      {     
        this.mapper.piecesLoaded++;
        if(this.mapper.piecesLoaded == this.mapper.piecesTotal)
        {
		  this.mapper.piecesLoaded=0;
		  this.mapper.piecesTotal=0;
		  this.mapper.ShowProgress();
		}
		else
		{
		  this.mapper.ShowProgress();
		}
        this.style.visibility = (this.v) ? this.v : 'visible';
        //this.style.visibility = 'visible';
      }   
      
      function Mapper_AsyncPan()
      {       
        if(move = map.moves.shift())
        {                   
        
          var calcDx = Math.min(0, map.container.X + move.x);
          var calcDy = Math.min(0, map.container.Y + move.y);
          
          calcDx = Math.max(calcDx, -(map.container.Width - map.view.Width));
          calcDy = Math.max(calcDy, -(map.container.Height - map.view.Height));
          
          map.container.Y = calcDy;
          map.container.X = calcDx;
          map.container.style.top = map.container.Y ;
          map.container.style.left = map.container.X ;          
          
          if(map.minimap)
            map.minimap.MoveCursor(map.container.X, map.container.Y);                                                           
          
          window.setTimeout(Mapper_AsyncPan, 5);      
        }
        else
        {
          map.MoveInProgress = false;
          // ensure region 
          if(map.ShowTooltipAfterMove == true)
          {
            map.tooltip.MoveTo(map.tooltip.X, map.tooltip.Y);
            map.tooltip.Show();
            map.ShowTooltipAfterMove = false;
          }
          map.LoadRegion();                     
        }
      }     
    
    /* pseudoclass MapPiece */
      function MapPiece(cX, cY, mapper)
      {
        var x = cX * gPieceSize;
        var y = cY * gPieceSize;        
      
        this.mapper = mapper;
        
        this.MapX = cX;
        this.MapY = cY;               
        
        this.elements = new Array(mapper.Layers);
        for(var i=0; i< mapper.Layers; i++)
        {
          this.elements[i] = document.createElement("IMG"); 
          this.elements[i].className    = "piece";
          this.elements[i].style.left   = x;
          this.elements[i].style.top    = y;
          this.elements[i].style.zIndex = i+20;
          this.elements[i].style.width  = gPieceSize;
          this.elements[i].style.height = gPieceSize;
          this.elements[i].alt = '(' + cX + ',' + cY + ')';                   
          this.elements[i].onload = Mapper_ShowPiece;
          this.elements[i].ondragstart = function(e) { return false; };         
          mapper.container.appendChild(this.elements[i]);                 
          this.elements[i].loaded = false;
          this.elements[i].v = 'hidden';
          this.elements[i].style.visibility = 'hidden';
          this.elements[i].mapper = mapper;
        }
        
        this.X = x;
        this.Y = y;       
        
        this.Load = function()
        {                                       
          for(var i=0; i< this.mapper.Layers; i++)
          {       
            if(this.elements[i].loaded == false && this.elements[i].v == 'visible')
            {
	            this.elements[i].src = this.mapper.GetPiece(this.MapX, this.MapY, i);                         
	            this.elements[i].loaded = true;
	        }
          }         
        };
        
        this.InView = function()
        {
          if(
            ((this.mapper.container.X + this.X) >= -100) && 
            ((this.mapper.container.Y + this.Y) >= -100) &&
            ((this.mapper.container.X + this.X) <= this.mapper.view.Width + 100) && 
            ((this.mapper.container.Y + this.Y) <= this.mapper.view.Height + 100)
          )
           return true;
           
          return false;
        };
        
        
        this.ViewLayer = function(layer, visibility)
        {
          this.elements[layer].v = (visibility) ? 'visible' : 'hidden';
          this.elements[layer].style.visibility = this.elements[layer].loaded ? this.elements[layer].v : 'hidden';
        };
        
        return this;
      }
    
    /* pseudoclass MapMove */
      function MapMove(x, y)
      {
        this.x = x;
        this.y = y;
        return this;        
      }
    
    /* pseudoclass Tooltip */
      function Tooltip(mapper)
      {
        this.X = 0;
        this.Y = 0;
        this.mapper = mapper;
        this.element = document.getElementById("tooltip");
        this.name = document.getElementById("nameinfo");
        this.lat = document.getElementById("latinfo");
        this.lon = document.getElementById("loninfo");
        this.alt = document.getElementById("altinfo");        
        this.latlbl = document.getElementById("latinfolbl");
        this.lonlbl = document.getElementById("loninfolbl");
        this.altlbl = document.getElementById("altinfolbl"); 
        this.text = document.getElementById("alttext");       

        
        this.SetData = function(name, lat, lon, alt, id, text)
        {
          if(text != null && (text.length > 0))
          {
            this.text.innerHTML = text;
          }
          if(name.length > 40)
            name = name.substring(0, 40) + '...';
          if(id > 0)
            this.name.innerHTML = '<'+'a '+'href="/bin/poteci/puncte.php?id='+id+'">'+name+'<'+'/a>';
          else
            this.name.innerHTML = name;
            
          this.lat.innerHTML = lat;
          this.lon.innerHTML = lon;

          this.latlbl.innerHTML = 'Lat:';
          this.lonlbl.innerHTML = 'Lon:';

          if(alt > 0) 
          {
            this.alt.innerHTML = alt+ 'm';
            this.altlbl.innerHTML = 'Alt:';
          }
          else 
          {
            this.alt.innerHTML = '';
            this.altlbl.innerHTML = '';
          }
          
          if(this.element.offsetWidth >= parseInt(this.mapper.view.Width/2))
          {
            this.element.style.width = parseInt(this.mapper.view.Width/2);
          }
        }
        
        this.MoveTo = function(x, y)
        {
          var lr = 'w'; var dx = 0;
          var ud = 's'; var dy = this.element.offsetHeight;
          var posX = 0;
          var posY = 0;         
          if(x > (this.mapper.container.Width - parseInt(this.mapper.view.Width/2)))
          {
            lr = 'e'; dx = this.element.offsetWidth; 
            posX = this.mapper.view.Width - (this.mapper.container.Width - x);
          }
          else if(x < parseInt(this.mapper.view.Width/2))
          {
            posX = x;
          }
          else
          {
            posX = parseInt(this.mapper.view.Width/2);
          }         
          
          if(y < parseInt(this.mapper.view.Height/2))
          {
            ud = 'n'; dy = -100; posY = y;
          } 
          else if(y > (this.mapper.container.Height - parseInt(this.mapper.view.Height/2)))
          {
            posY = this.mapper.view.Height - (this.mapper.container.Height - y);
          }
          else
          {
            posY = parseInt(this.mapper.view.Height/2);
          }
          
          this.element.style.backgroundImage = 'url(/img/tooltip-'+ud+lr+'.gif)';  
          this.element.style.backgroundPosition = ((ud == "n") ? "top" : "bottom") + " " + ((lr == "w") ? "left" : "right");
          this.element.style.top = posY - dy;
          this.element.style.left = posX - dx;
                                          
        }
        
        this.Show = function()
        {
          this.element.style.visibility = 'visible';
        }
        
        this.Hide = function()
        {
          this.element.style.visibility = 'hidden';
        }
        
        this.Close = function()
        {
          this.Hide();
          this.mapper.ShowTooltipAfterMove = false;
        }
        
        return this;        
      }
    
    /* pseudoclass Minimapper */
      function MiniMap(map)
      {
        this.map = map;
        this.content  = document.getElementById("minimap");
        this.cursor   = document.getElementById("mmcursor");        
        
        this.MoveCursor = function(x, y)
        {
          // x, y sunt in coordonatele containerului
          this.cursor.style.top = parseInt( parseInt(this.content.style.height) * -y / this.map.container.Height );
          this.cursor.style.left = parseInt( parseInt(this.content.style.width) * -x / this.map.container.Width );
        }
        
        this.Show = function(how)
        {         
          this.content.style.visibility =
            this.cursor.style.visibility = how ? 'visible' : 'hidden';
        }
        
        if(this.map.container.Width > this.map.container.Height)
        {
          this.content.style.width = 200;
          this.content.style.height = parseInt(200 * this.map.container.Height / this.map.container.Width);
        } 
        else
        {
          this.content.style.height = 200;
          this.content.style.width = parseInt(200 * this.map.container.Width / this.map.container.Height);
        }
        this.content.style.backgroundImage = 'url(/cache/mapper/full'+this.map.id+'/minimap.jpg)';
        
        // dimensiune cursor si pozitie.
        this.cursor.style.width = 
          this.cursor.style.height = 
            parseInt(this.map.view.Width * parseInt(this.content.style.width) / this.map.container.Width);
        
        return this;
      }
    
    
    /* pseudoclass Mapper */
      function Mapper(size, xCount, yCount, layerCount, id, keyCode)
      {
				this.id = id;
        this.size = size;
        
        this.onlayervisibilitychange = new Array();
        
        this.view = document.getElementById("mapper");  
        
        this.view.Width = (size == 0) ? document.body.clientWidth -100 : size * 100;
        this.view.Height = (size == 0) ? document.body.clientHeight -100 : size * 100;       
        
        this.view.style.width = this.view.Width;
        this.view.style.height = this.view.Height;
        
        this.view.mapper = this;
        this.tooltip = new Tooltip(this);
        this.keycode = keyCode;
        
        this.progressBar = document.getElementById("pbar");
        this.progressCursor = document.getElementById("pbarc");
        
        // redimensionare container in f de dimensiunea hartii, si centrare view (pentru inceput)       
        this.container = document.getElementById("cont");       
        this.container.Width = xCount * 100;
        this.container.Height = yCount * 100;
        this.container.style.width = this.container.Width;
        this.container.style.height = this.container.Height;                
        this.container.X = parseInt((this.view.Width - this.container.Width)/2);
        this.container.Y = parseInt((this.view.Height - this.container.Height)/2);
        this.container.style.top = this.container.Y;
        this.container.style.left = this.container.X;
        
        //this.minimap = null;
        
        this.minimap = new MiniMap(this);
        this.minimap.MoveCursor(this.container.X, this.container.Y);
        this.minimap.Show(false);
        
        
        this.MapWidth = xCount;
        this.MapHeight = yCount;
        
        this.Layers = layerCount;
        
        this.mousedown = false;

        this.pointX = 0;
        this.pointY = 0;

		this.piecesLoaded = 0;
		this.piecesTotal = 0;
  
  	
        this.moves = new Array();
                
        this.view.onmousedown = function(e) 
          { 
            //this.focus();           
            e = (e) ? e : ((window.event) ? window.event : "");             
            //window.status = 'mouse down'; 
            this.mapper.mousedown = true; 
            this.mapper.pointX = e.screenX;
            this.mapper.pointY = e.screenY;
            this.mapper.view.style.cursor = 'move';
          };
          
        this.view.onmousemove = function(e) 
          {
            //window.status = 'moving...';
            e = (e) ? e : ((window.event) ? window.event : "");                           
            if(this.mapper.mousedown)
            {
              var deltaX = e.screenX - this.mapper.pointX;
              var deltaY = e.screenY - this.mapper.pointY;              
              //window.alert(e.screenX);
              if( Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)
              {
                this.mapper.pointX = e.screenX;
                this.mapper.pointY = e.screenY;           
                //window.alert(this.mapper.container.style.top);
                //this.mapper.PanMap(deltaX, deltaY);                           
                this.mapper.MoveInProgress = true;
                this.mapper.tooltip.Hide();
                this.mapper.moves.push( new MapMove(deltaX, deltaY) );
                Mapper_AsyncPan();
              }             
            }
            return true;
          };  
          
        this.view.ondblclick = function(e)
        {         
          e = (e) ? e : ((window.event) ? window.event : "");                           
          var deltaX = 0; 
          var deltaY = 0; 
          if(e.offsetX)
          {
            deltaX = 250 - e.offsetX;
            deltaY = 250 - e.offsetY;
          }
          else if(e.layerX)
          {
            deltaX = 250 - e.layerX;
            deltaY = 250 - e.layerY;
          }
          //window.alert(deltaX + ' ' + deltaY);
          
          
          if(deltaX == 0 && deltaY == 0)
            return;
          
          this.mapper.PanMap(deltaX, deltaY);         
        }
        
        this.view.onkeydown = function(e)
        {
          e = (e) ? e : ((window.event) ? window.event : "");                           
          switch(e.keyCode)
          { 
            case 37:
              this.mapper.PanMap(50, 0);
              break;
            case 38:
              this.mapper.PanMap(0, 50);
              break;
            case 39:
              this.mapper.PanMap(-50, 0);
              break;
            case 40:
              this.mapper.PanMap(0, -50);
              break;
          }
          return false;
        }
            
        this.view.onmouseup = 
          this.view.onmouseleave = 
            this.view.onmouseout = function(e) 
          { 
            //window.status = 'mouse out'; 
            this.mapper.mousedown = false; 
            this.style.cursor='default';
            return false;
          };
        
        this.PanMap = function(dx, dy)
          {           
            this.tooltip.Hide();        
            if(Math.abs(dx) > 10 || Math.abs(dy) > 10)
            {                                                                         
              var steps = parseInt(Math.max(Math.abs(dx), Math.abs(dy)) / 10);
              if(steps != 0)
              {
                var stepX = parseInt(dx / steps);
                var stepY = parseInt(dy / steps);
                                
                while(steps > 0)
                {             
                  this.QueueMove(stepX, stepY);
                  steps--;
                  dx -= stepX;
                  dy -= stepY;
                }
              }
            }
            
            this.QueueMove(dx, dy);                                     
          };
                      
        this.QueueMove = function(dxp, dyp)
        {
          
          this.moves.push( new MapMove(dxp, dyp) );
          if(!this.MoveInProgress)
          {
            this.MoveInProgress = true;
            window.setTimeout(Mapper_AsyncPan, 5);
          }       
        }   
    
		this.ShowProgress = function()
		{
		 	if(this.progressBar != null && this.progressCursor != null)
			{
				this.progressBar.style.display = this.piecesTotal > 0 ? 'block' : 'none';
				if(this.piecesTotal > 0)
				{
				   var p = parseInt(100*this.piecesLoaded / this.piecesTotal) + '%';
					this.progressCursor.style.width = p;
					this.progressCursor.innerHTML = p;
				}
			} 
		}
	    
        this.MoveNorth = function()
        {
          this.PanMap(0, 75);
        }                 
        this.MoveEast = function()
        {
          this.PanMap(-75, 0);
        }
        this.MoveWest = function()
        {
          this.PanMap(75, 0);
        }
        this.MoveSouth = function()
        {
          this.PanMap(0, -75);
        }
        this.MoveSouthWest = function()
        {
          this.PanMap(50, -50);
        }
        this.MoveSouthEast = function()
        {
          this.PanMap(-50, -50);
        }
        this.MoveNorthWest = function()
        {
          this.PanMap(50, 50);
        }
        this.MoveNorthEast = function()
        {
          this.PanMap(-50, 50);
        }
        
        this.MoveToPoint = function(dx, dy, title, lat, lon, alt, id, text)
        {            
          this.tooltip.Hide();
          this.tooltip.X = dx;
          this.tooltip.Y = dy; 
          //this.tooltip.MoveTo(dx, dy);
          this.tooltip.SetData(title, lat, lon, alt, id, text);
          this.ShowTooltipAfterMove = true;
          this.PanMap( parseInt(this.view.Width/2) - this.container.X - dx, parseInt(this.view.Height/2) - this.container.Y - dy);                      
        }
        
        this.GetPiece = function(x, y, layer)
        {             
          this.piecesTotal++;          
          return '/bin/poteci/mpgen.php?id='+this.id+'&x='+x+'&y='+y+'&l='+layer+'&key='+this.keycode+'&lc='+this.Layers;         
        }
        
        this.LoadRegion = function()
        {
          // ensure the pieces are loaded that will show in the view
          for(var i=0; i< this.MapWidth; i++)
          {
            for(var j=0; j< this.MapHeight; j++)
            {
              if(!this.pieces[i][j].loaded && this.pieces[i][j].InView())
              {
                this.pieces[i][j].Load();
              }
            }
          }
        };
                        
        this.pieces = new Array();
        for(var i = 0; i< this.MapWidth; i++)
        {
          this.pieces[i] = new Array();
          for(var j=0; j< this.MapHeight; j++)
          {
            this.pieces[i][j] = new MapPiece(i, j, this);           
          }
        } 
              
        this.ViewLayer = function(layer, visibility)
        {
          if ((layer== 1) && !visibility)

            this.tooltip.Hide();

          for(var i=0; i< this.pieces.length; i++)
          {
            for(var j=0; j< this.pieces[i].length; j++)
            {
              this.pieces[i][j].ViewLayer(layer, visibility);
            }
          }
          // refresh region
          if(visibility)
	          this.LoadRegion();
	        
	        // emulate event
	        if(typeof(this.onlayervisibilitychange[layer]) == "function")
	        {
						return this.onlayervisibilitychange[layer](visibility);
	        }  	        
	        return true;
        }
        
        this.ShowHideMinimap = function(how)
        {
          if(this.minimap)
            this.minimap.Show(how);
            
          return true;
        }
                      
        this.ShowTooltipAfterMove = false;
        this.MoveInProgress = false;
        return this;
      }