var areaEngine = {
  // draw canvas  
  canvas: '',
  // grouped objects
  objectsSet: '',  
  //objects list (array properties) 
  //used to remember some objects (to enable changing its properties)
  objects: {
    pathLabels: []
  },
  // objects properties
  opt : {
    circleSize: 3,
    circleAnimateSize: 10,
    circleAnimateTime: 200,
    strokeWidth: 3,
    textDeltaX: 5,
    textDeltaY: 6,
    textDeltaXIe: 5,
    textDeltaYIe: 10,    
    textBoxMargin: 5,
    tooltipFont : {"font": '11px "Arial"', stroke: "none", fill: "#01619e", 'text-anchor': 'start'},
    tooltipBackground : '#FFF',
    tooltipStroke : "#01619e"
  },
  timerObj : null,
  //current drew paths
  curPath: {
    id: ''
  },
  drawPathLabels: true,
  tooltipRect: '',
  tooltipText: ''
}

areaEngine.prototype = {}

areaEngine.init = function(settings) {  
  jQuery.extend(this.opt, settings);    
  
  if ($.browser.msie)
  {
    this.opt.textDeltaX = this.opt.textDeltaXIe;
    this.opt.textDeltaY = this.opt.textDeltaYIe;
  }
}

/**
 * 
 */
areaEngine.showPath = function (caller, type, id) {
  this.removeCanvas();

  if (caller != '')
  {
    $('.object_select').each(function() {
      if ($(this).attr("id") != caller.attr("id"))
        $(this).val("dummy");
    });
  }
  
  if (typeof(id) != 'undefined')
  {   
    this.curPath.id = id;
    ajax.callUrl(new Array(new Array('action','getPath'), new Array('id',id), new Array('scale', mapEngine.scale)), this.getPathCallback);
    return;
  }    
  
  if (type == 'zoom')
  {   
    ajax.callUrl(new Array(new Array('action','getPath'), new Array('id',id), new Array('scale', mapEngine.scale)), this.getPathCallback);
    return;
  }
  
  selectId = '#'+type+'_Select';    
  if ($(selectId).length > 0)
  {
    cords = $(selectId).val().split("_");
    posX = -1 * cords[0];
    posY = -1 * cords[1];
    objId = cords[2];
    //TODO obsluga bledow
  }
  else
      return;
  
  cords = mapEngine.transformCoordinates(mapEngine.scale, posX + mapEngine.areaWidth/2, posY  + mapEngine.areaHeight/2);
  left = cords[0];
  top1 = cords[1];
  
  //go to position    
  //move or jump?    
  document.getElementById("parts").style.left = left+"px";  
  document.getElementById("parts").style.top = top1+"px";
  
  mapEngine.curVieportX = left;
  mapEngine.curVieportY = top1;
  
  //clear last pointer?
  //show pointer?
  mapEngine.addParts(left, top1); 
  
  //validacja  
  this.curPath.id = objId;
  ajax.callUrl(new Array(new Array('action','getPath'), new Array('id',objId), new Array('scale', mapEngine.scale)), this.getPathCallback);
}

areaEngine.showAllPaths = function (type) {
  this.showPath('', '', type);
}

areaEngine.selectKeyPress = function() {
  areaEngine.timer = true;     
}

areaEngine.selectClick = function() {
  areaEngine.timer = false;     
}

areaEngine.selectChange = function(a,b) {  
  if (areaEngine.timer)
  {
    delay = 1000;
    clearTimeout( areaEngine.timerObj );
    areaEngine.curPath.id = '';
    pathEngine.curPath.id = '';
    areaEngine.timerObj = setTimeout( function(){areaEngine.showPath(a,b);}, delay );
//    mapEngine.timerObj = setTimeout( "alert('a');", delay );
  }
  else
  {
    areaEngine.curPath.id = '';
    pathEngine.curPath.id = '';    
    clearTimeout( areaEngine.timerObj );
    areaEngine.showPath(a,b);
  }
}

areaEngine.drawPaths = function (pathsData) {
  var pathSVG = '';
  var lastLeft = -1;
  var lastTop = -1;
  var pathLength = 0;
  var color;
  var obj;
  var middleLeft, middleTop;
  var leave_timer;
  var is_label_visible = false;
  var pathLabel = {rect: '', text: ''};
  var point = {x: '', y: '', text: ''};
  var i = 0;
  //variables to draw area background (to point user eye to small barely visible areas)
  var tooltip, popup;    
  var minLeft = minTop = 999999;
  var maxLeft = maxTop = 0;
  var radius;
  
  this.canvas = Raphael(document.getElementById("pathContener"), controller.opt.mapWidth, controller.opt.mapHeight);  
  this.objectsSet = this.canvas.set();    
  areaEngine.tooltipRect =  this.canvas.rect(0, 0, 30, 15, 5).attr({fill: this.opt.tooltipBackground, stroke: this.opt.tooltipStroke, "stroke-width": 1}).hide();
  this.objectsSet.push(areaEngine.tooltipRect);
  areaEngine.tooltipText = this.canvas.text(0, 0, '').attr(this.opt.tooltipFont).hide();
  this.objectsSet.push(areaEngine.tooltipText);
  
  for (path in pathsData)
  {        
    pathSVG = '';
    lastLeft = -1;
    lastTop = -1;   
    
    color = '#'+pathsData[path].color;
//    alert(pathsData[path].parts);
    //TODO - check exists
    pathLength = pathsData[path].parts.length;
    for(var parts=0; parts < pathLength; parts++)
    //for (parts in pathsData[path].parts)
    {
      tooltip = false;
      popup = false;
      
      if (+pathsData[path].parts[parts].left < minLeft)
        minLeft = +pathsData[path].parts[parts].left;
      
      if (+pathsData[path].parts[parts].top < minTop)
        minTop = +pathsData[path].parts[parts].top;
      
      if (+pathsData[path].parts[parts].left > maxLeft)
        maxLeft = +pathsData[path].parts[parts].left;
      
      if (+pathsData[path].parts[parts].top > maxTop)
        maxTop = +pathsData[path].parts[parts].top;
      
//        firstX = +pathsData[path].parts[parts].left;
//        firstY = +pathsData[path].parts[parts].top;
//      }
//      if (lastLeft != -1)
//        pathSVG += 'L ' + lastLeft + ' ' + lastTop + ' ';  
      if (parts+1 < pathLength)
      {
        if (lastLeft != -1)
          pathSVG += 'L ' + pathsData[path].parts[parts].left + ' ' + pathsData[path].parts[parts].top + ' ';
        
        if (parts == 0)
          pathSVG += 'M ' + pathsData[path].parts[parts].left + ' ' + pathsData[path].parts[parts].top + ' ';
        else
          pathSVG += 'L ' + pathsData[path].parts[parts].left + ' ' + pathsData[path].parts[parts].top + ' ';
      }

      if (pathsData[path].parts[parts].hasOwnProperty('selected') && pathsData[path].parts[parts].selected == 'Y')
        this.objectsSet.push(this.canvas.circle(+pathsData[path].parts[parts].left, +pathsData[path].parts[parts].top, this.opt.circleSize+5));
                  
      if (pathsData[path].show_marker == 'Y' && pathsData[path].parts[parts].show_marker == 'Y')
      {      
        obj = this.canvas.circle(+pathsData[path].parts[parts].left, +pathsData[path].parts[parts].top, this.opt.circleSize);             
        this.objectsSet.push(obj);
//        objs[curObj].translate(20,40);
        obj.attr({id: 'svg'+pathsData[path].parts[parts].popupdiv, stroke: color, fill: color});                

        obj.drawData = {};
        if (pathsData[path].show_tooltip == 'Y' && pathsData[path].parts[parts].tooltip != '')
        {
         tooltip = true;
         obj.drawData.x = +pathsData[path].parts[parts].left;
         obj.drawData.y = +pathsData[path].parts[parts].top;
         obj.drawData.tooltip = pathsData[path].parts[parts].tooltip;       
        } 
        
        // label description
        if (pathsData[path].parts[parts].hasOwnProperty('popupdiv') && pathsData[path].show_description == 'Y' )
        {          
          popup = true;
                                       
          $('#'+'svg'+pathsData[path].parts[parts].popupdiv).fancybox({
            'frameWidth':    230, 
            'frameHeight': 100,
            'hideOnContentClick': false,
            'notAhref': '#'+pathsData[path].parts[parts].popupdiv}
           );   
          obj.attr({"class" : "mouse_pointer"});
        }
        
        if (popup)
        {
          if (tooltip)
          {
            obj.mouseover(function () {
//              alert(this.drawData.tooltip);
              areaEngine.tooltipText.attr({'text': this.drawData.tooltip}).animate({'x': this.drawData.x + areaEngine.opt.textDeltaX, 'y': this.drawData.y + areaEngine.opt.textDeltaY}, 0).show();
              width = areaEngine.tooltipText.getBBox().width;
              if (width != 0)
                areaEngine.tooltipRect.animate({'x': this.drawData.x, 'y': this.drawData.y, 'width': width + areaEngine.opt.textBoxMargin*2}, 0).show();               

              areaEngine.tooltipRect.toFront();
              areaEngine.tooltipText.toFront();
              this.animate({r: areaEngine.opt.circleAnimateSize}, areaEngine.opt.circleAnimateTime);
            });
            
            obj.mouseout(function () {
              areaEngine.tooltipRect.hide();
              areaEngine.tooltipText.hide();
              this.animate({r: areaEngine.opt.circleSize}, areaEngine.opt.circleAnimateTime);
            });            
          }
          else
          {
            obj.mouseover(function () {
              this.animate({r: areaEngine.opt.circleAnimateSize}, areaEngine.opt.circleAnimateTime);
            });
            
            obj.mouseout(function () {
              this.animate({r: areaEngine.opt.circleSize}, areaEngine.opt.circleAnimateTime);
            });            
          }
        }
        else
        {
          obj.mouseover(function () {
//            alert(this.drawData.tooltip);
            areaEngine.tooltipText.attr({'text': this.drawData.tooltip}).animate({'x': this.drawData.x + areaEngine.opt.textDeltaX, 'y': this.drawData.y + areaEngine.opt.textDeltaY}, 0).show();
            width = areaEngine.tooltipText.getBBox().width;
            if (width != 0)
              areaEngine.tooltipRect.animate({'x': this.drawData.x, 'y': this.drawData.y, 'width': width + areaEngine.opt.textBoxMargin*2}, 0).show();
            
            areaEngine.tooltipRect.toFront();
            areaEngine.tooltipText.toFront();            
          });          
          
          obj.mouseout(function () {
            areaEngine.tooltipRect.hide();
            areaEngine.tooltipText.hide();
          });          
        }
      }
      
      //draw text
      if (lastLeft != -1)
      {
        //calculate line's middle
        middleLeft = +lastLeft + 0.5 * (pathsData[path].parts[parts].left - lastLeft);
        middleTop = +lastTop + 0.5 * (pathsData[path].parts[parts].top - lastTop);
        if (pathsData[path].parts[parts].hasOwnProperty('path_label') && pathsData[path].parts[parts].path_label != '')
        {
//          pathLabel.rect = this.canvas.rect(middleLeft, middleTop, 30, 15, 5).attr({fill: "#000", stroke: "#474747", "stroke-width": 1}); 
//          pathLabel.text = this.canvas.text(middleLeft+13, middleTop+6, pathsData[path].parts[parts].path_label).attr(txt); 

          // path label
          if (this.drawPathLabels)
          {
            pathLabel = {
              rect: '',
//              rect : this.canvas.rect(middleLeft, middleTop, 30, 15, 5).attr({fill: color, stroke: "#474747", "stroke-width": 1}),
              text : this.canvas.text(middleLeft+areaEngine.opt.textDeltaX, middleTop+areaEngine.opt.textDeltaY, pathsData[path].parts[parts].path_label).attr(this.opt.tooltipFont) 
            };
            
            width = pathLabel.text.getBBox().width;
            if (width != 0)
              pathLabel.rect = this.canvas.rect(middleLeft, middleTop, width + areaEngine.opt.textBoxMargin*2, 15, 5).attr({fill: this.opt.tooltipBackground, stroke: this.opt.tooltipStroke, "stroke-width": 1});            
          } 
          else
            pathLabel = {
              rect : this.canvas.rect(middleLeft, middleTop, 30, 15, 5).attr({fill: this.opt.tooltipBackground, stroke: this.opt.tooltipStroke, "stroke-width": 1}).hide(),
              text : this.canvas.text(middleLeft+areaEngine.opt.textDeltaX, middleTop+areaEngine.opt.textDeltaY, pathsData[path].parts[parts].path_label).attr(this.opt.tooltipFont).hide() 
            };
          
          pathLabel.rect.toFront();
          pathLabel.text.toFront();
          this.objectsSet.push(pathLabel.rect);
          this.objectsSet.push(pathLabel.text);
          this.objects.pathLabels.push(pathLabel);
          //this.objectsSet.push(this.canvas.text(middleLeft+10, middleTop+10, pathsData[path].parts[parts].path_label));
        }
      }
      
      lastLeft = pathsData[path].parts[parts].left;
      lastTop = pathsData[path].parts[parts].top;   
    }
    
    if (lastLeft != -1)
      pathSVG += 'L ' + lastLeft + ' ' + lastTop + 'Z';

    // draw background
    if (maxLeft - minLeft > maxTop - minTop)
      radius = maxLeft - minLeft;
    else
      radius = maxTop - minTop;
    
    if (radius < 50)
      radius = 50;
        
    obj = this.canvas.circle(minLeft + (maxLeft - minLeft)/2, minTop + (maxTop - minTop)/2, radius);
    obj.attr({'fill-opacity': '0.1', stroke: '#08de30', fill: '#08de30', id : 'svg'+pathsData[path].popupdiv+'_back', 'class' : 'mouse_pointer'});
    this.objectsSet.push(obj);
    
    /*
    pathSegment = this.canvas.path({stroke: "none", 
                                     "stroke-width": this.opt.strokeWidth,
                                     "stroke-dasharray": pathsData[path].style, 
                                     "fill" : '#08de30', 
                                     "fill-opacity" : 0.7,
                                     "class" : "mouse_pointer",
                                     id : 'svg'+pathsData[path].popupdiv}, pathSVG).toBack();*/
    pathSegment = this.canvas.path(pathSVG).attr({stroke: "none", 
      "stroke-width": this.opt.strokeWidth,
      "stroke-dasharray": pathsData[path].style, 
      "fill" : '#08de30', 
      "fill-opacity" : 0.7,
      "class" : "mouse_pointer",
      id : 'svg'+pathsData[path].popupdiv}).toBack();
//    pathSegment = this.canvas.path({}, 'M10 10L90 90');
    if (pathsData[path].show_description == 'Y' && pathsData[path].show_description != '')
    {      
      $('#svg'+pathsData[path].popupdiv+'_back').fancybox({
//      $('#svg'+pathsData[path].popupdiv).fancybox({
        'frameWidth':    230, 
        'frameHeight': 100,
        'hideOnContentClick': false,
        'notAhref': '#'+pathsData[path].popupdiv}
       );
    }
    
//    obj.attr({'fill-opacity': '0.1', stroke: '#57321f'});
    
    
//    this.objectsSet.push(pathSegment);    
    
    
    
    /*
    txt = {"font": '12px "Arial"', stroke: "none", fill: "#000"};
    label = this.canvas.text(0, 0, pathsData[path].label).attr(txt).hide();
    
    frame = this.canvas.rect(10, 10, 100, 30, 5).attr({fill: "#D8E5af", stroke: "#FFF", "stroke-width": 2}).hide();
    
    pathSegment.mouseover(function (e) {
      clearTimeout(leave_timer);
      frame.show().animate({x: e.pageX, y: e.pageY}, 200 * is_label_visible);
      label.show().animate({x: e.pageX + 50, y: e.pageY + 10}, 200 * is_label_visible);
      label.toFront();
      //label[0].attr({text: data + " hit" + ((data % 10 == 1) ? "" : "s")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 12}, 200 * is_label_visible);
      //label[1].attr({text: lbl + " September 2008"}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 27}, 200 * is_label_visible);
      //dot.attr("r", 7);
      is_label_visible = true;
      //r.safari();
    });*/
    
//    path.mouseover(function () {      
//      frame.show().animate({x: middleLeft, y: middleTop}, 200);
//    });
//
    /*pathSegment.mouseout(function () {
      leave_timer = setTimeout("frame.hide(); label.hide();", 1000);
//      .animate({x: middleLeft, y: middleTop}, 1000);
//      frame.hide();
    });    */
    
  }
    
  //alert(pathSVG);
  //this.objects.attr({});
  areaEngine.bindMouse();
}

areaEngine.getPathCallback = function () {
  if(ajax.req.readyState == 4) 
  {
    var response = ajax.req.responseText;
//    alert(ajax.req.responseText);
    html = eval('(' + ajax.req.responseText + ')');
    
    //alert(ajax.req.responseText);
    $('#map').append(html.popup);
    
    areaEngine.drawPaths(html.paths);
        
//    document.getElementById("pathArea").style.position = "absolute";
//    document.getElementById("pathArea").style.top = document.getElementById("parts").style.top;
//    document.getElementById("pathArea").style.left = document.getElementById("parts").style.left; 
    document.getElementById("pathContener").style.position = "absolute";
//    document.getElementById("pathArea").style.position = "absolute";
    document.getElementById("pathContener").style.top = document.getElementById("parts").style.top;
    document.getElementById("pathContener").style.left = document.getElementById("parts").style.left; 

    $("#pathArea").bind('DOMMouseScroll',  function(event) {
//    $(".map_frame").bind('DOMMouseScroll',  function(event) {
      mapEngine.mouseScroll(event);
      return false;
    });

    $("#pathArea").bind('mousewheel',  function(event) {      
//    $(".map_frame").bind('mousewheel',  function(event) {      
      mapEngine.mouseScroll(event);
      return false;
    });
    
   /* 
    $('a[rel=fancybox]').fancybox({
      'frameWidth':    230, 
     'frameHeight': 100,
     'hideOnContentClick': false}
    );
          
    $('.tooltip').tooltip({ 
        track: true, 
        delay: 0, 
        showURL: false, 
        showBody: " - ", 
        fade: 250 
    }); */     
  }  
}

areaEngine.removeCanvas = function() {
  if ($('#pathArea').length > 0)
    jQuery('#pathArea').remove();
  
  jQuery(".popup_marker").remove();
  jQuery(".marker_link").remove();  
}

areaEngine.drawsPathsAfterZoom = function() {
//  alert('aa');
  if (areaEngine.curPath.id == '')
    return;
  
  areaEngine.showPath('', 'zoom', areaEngine.curPath.id);
}

areaEngine.togglePathLabels = function() {
  this.drawPathLabels = !this.drawPathLabels;
  
  pathLabelsCnt = this.objects.pathLabels.length;
  
  for(var i=0; i < pathLabelsCnt; i++)
  {
    
    if (this.drawPathLabels)
    {
      this.objects.pathLabels[i].rect.show();
      this.objects.pathLabels[i].text.show();
      this.objects.pathLabels[i].rect.toFront();
      this.objects.pathLabels[i].text.toFront();            
    }
    else
    {
      this.objects.pathLabels[i].rect.hide();
      this.objects.pathLabels[i].text.hide();
    }      
  }
}

areaEngine.bindMouse = function() {
  $("#pathArea").mousemove(function(e){    
    mapEngine.lastPosX = mapEngine.posX;
    mapEngine.lastPosY = mapEngine.posY;
    mapEngine.posX = e.pageX;
    mapEngine.posY = e.pageY;       
    mapEngine.mapMouseMove();
    /*
    if (mapEngine.mouseDown == 1)
    {
      var deltaX = mapEngine.lastPosX - mapEngine.posX;
      var deltaY = mapEngine.lastPosY - mapEngine.posY;
      
      areaEngine.objectsSet.translate(-1 * deltaX, -1 * deltaY);
    }*/
    return false; 
     //if x,y > poza ramka mapy to mouseDown = 0;
  });  
}