var map;

function init() 
{
  repositionElements();
  var config = {
    slideX: 300,
    slideY: 300,
    maxX: -2120,
    maxY: -2427,
    tileWidth: 300,
    tileHeight: 300,
    tileRows: 10,
    tileCols: 9,
    tileUrl: '/assets/helsinki/img/tiles/',
    pointOffset: {x: -15, y: -24},
    top: {lat: 60.287663, lon: 24.837341},
    bottom: {lat: 60.094033, lon: 25.211006},
    tile: {x: -0.018383, y: 0.041285}
  }
  if ($('map')) {
    map = new Map($('map'), config);

	  if ($('smallMap')) {
	    var uid = new Date().getTime();
	    var so = new SWFObject('/assets/helsinki/swf/smallMap.swf', 'smallMapSwf', '180', '195', '8', '#ffffff');
	    so.addParam("wmode", "transparent");
	    so.write("smallMap");
	  }
  }
  
  if ($('task')) {
    initTaskPage();
  }
  
  var categories = $ES('#categories span');

  if (categories) {
    categories.each(function (catLink) {
      catLink.addEvent('click', function(e) {
        $ES('#categories span').each(function(el) {
          el.removeClass('selected');
        });
        catLink.addClass('selected');
        new Event(e).stop();
        var className = this.parentNode.className;
        map.addPin(className);
        var btn = $E('#step1 .submit input');
        if (btn && btn.disabled) {
          btn.src = '/assets/helsinki/img/step/btn_step1.gif';
          btn.disabled = false;
        }
      });
    });
  } 
}


var Map = new Class(
{

    initialize: function(container, config) 
    {
        this.config = config;
        this.container = container;
        container.addEvents({
          'moveIt': function() {
             var swf = document.getElementById('smallMapSwf');
             if (swf) {
               if (swf.movePointer) {
			           var mapPos = map.getMapCenter();
							   var position = {};
							   position.x = mapPos.left - 297;
							   position.y = mapPos.top - 297;
							   
		             swf.movePointer(position);
	             } else {
	               if (swf.PercentLoaded() < 100) {
	                 $('map').fireEvent('moveIt', null, 100);
	               }
	             }
             }
          }
        });
        this.pin = null;
        this.inited = false;
        this.hideControls();
        var mapInstance = this;
        var alpha = new Asset.image('/assets/helsinki/img/alpha.png', {
          onload:function() {
		        if (!mapInstance.inited) {
		          mapInstance.inited = true;
		          mapInstance.createBorder().initControls().makeDraggable();
	          }
          }
        });
    },
    setMapPosition: function() 
    {
      this.container.fireEvent('moveIt')
      Cookie.set('mapPosition', Json.toString({
        x: this.container.getStyle('left').toInt(),
        y: this.container.getStyle('top').toInt()
      }), {path: '/helsinki/'});
    },
    setActiveCategories: function(params) 
    {
      Cookie.set('activeCategories', Json.toString(params), {path: '/helsinki/'});
    },
    getActiveCategories: function()
    {
      var str = Cookie.get('activeCategories');
      if (str) {
        return Json.evaluate(str);
      }
      return null;
    },
    getMapPosition: function()
    {
      var str = Cookie.get('mapPosition');
      if (str) {
        return Json.evaluate(str);
      }
      return {x: -380, y: -1590};
    },        
    hideControls: function()
    {
      if ($('steps')) {
        $('steps').setStyle('visibility', 'hidden');
      }    
      if ($('controls')) {
        $('controls').setStyle('visibility', 'hidden');
      }    
      if ($('border')) {
        $('border').setStyle('visibility', 'hidden');
      }    
    },
    showControls: function()
    {
      if (window.location.hash && window.location.hash.contains('id-')) {
        this.showPoint(window.location.hash.substr(4));
      }
      if ($('controls')) {
        $('controls').setStyle('visibility', 'visible');
      } 
      $('categories').removeClass('off');
      $E('#bg .active').addClass('off');
      $('border').setStyle('visibility', 'visible');
      $('loading').addClass('off');
      this.loadTiles();
    },
    loadTiles: function()
    {
      var tiles = $('tiles'); 
      if (tiles) { 
	      for (var y = 0; y < this.config.tileRows; y++) {
	        for (var x = 0; x < this.config.tileCols; x++) {
	          var img = new Element('img', {
	            'styles': {
	              'position': 'absolute',
	              'left': x * this.config.tileWidth,
	              'top': y * this.config.tileHeight,
	              'width': this.config.tileWidth,
	              'height': this.config.tileHeight
	            },
	            'alt': '',
	            'width': this.config.tileWidth,
	            'height': this.config.tileHeight,
	            'src': this.config.tileUrl+(y+1)+'-'+(x+1)+'.gif',
	            'events': {
		            'load': function() {
		              if (!window.ie) {
		                this.injectInside(tiles);
	                }
		            }
		          }
	          });
            if (window.ie) {
		          img.injectInside(tiles);
	          }
	        }
	      }
	    }
      return this;    
    },
    initPoints: function()
    {
      var mapInstance = this;
      var points = $ES('ul.points a');
      if (points) {
        points.each(function(point) {
          if (point.href.indexOf('#id-') != -1) {
	          point.addEvent('click', function(e) {
	            new Event(e).stop();
	            mapInstance.showPoint(point.href.substr(point.href.lastIndexOf('#') + 4));
	          });
	        }
        });
      }
    },
    initCategories: function() 
    {
      var categories = $ES('#categories li');
      var mapInstance = this;
      if (categories) {
	      var selectedCategories = this.getActiveCategories();
	      var showAll = false;
	      if (null == selectedCategories) {
	        //showAll = true; 
	        selectedCategories = ['romantic'];
	      } 
        categories.each(function(category) {
          var categoryLink = $E('a', category);
          if (showAll) {
            categoryLink.addClass('selected');
            selectedCategories[selectedCategories.length] = category.className; 
          } else {
            if (selectedCategories.contains(category.className)) {
              categoryLink.addClass('selected');
            }
          }
          category.addEvent('click', function(e) {
            var selected = mapInstance.getActiveCategories();
            if (null == selected) {
              selected = [];
            }
            new Event(e).stop();
            var a = $E('a', this);
            var div = $ES('div.' + this.className, 'overlay');
            if (!a.hasClass('selected')) {
						  a.addClass('selected');
              if (div) {
               div.removeClass('off');
              }
              selected.include(this.className);
              mapInstance.setActiveCategories(selected);
						  var jSonRequest = new Json.Remote("/helsinki/json/points", {
						    onComplete: mapInstance.createPoints
						  }).send({'category': this.className});            
					  } else {
					    if (div) {
					     div.addClass('off');
					    }
					    a.removeClass('selected');
					    selected.remove(this.className);
					    mapInstance.setActiveCategories(selected);
					  }
            return false;
          });
          
          
          if ($E('a', category).hasClass('selected')) {
             var jSonRequest = new Json.Remote("/helsinki/json/points", {
               onComplete: mapInstance.createPoints
             }).send({'category': category.className});            
          }
        });
        mapInstance.setActiveCategories(selectedCategories);
      }
      
      var landmarks = $('landmarks');
      var activateLandmarks = $('activateLandmarks');
      if (landmarks && activateLandmarks) {
        activateLandmarks.onclick = function() {
	        var selected = mapInstance.getActiveCategories();
          if (null == selected) {
            selected = [];
          }
	        var img = $E('img', landmarks);
	        if (!img) {
	          img = new Asset.image(
	            '/assets/helsinki/img/landmarks.gif'
	          );
	          img.setStyles({
              'position':'absolute',
              'left':0,
              'top':0
            });
	          img.injectInside(landmarks);
	          selected.include("landmarks");
	          mapInstance.setActiveCategories(selected);
	        } else {
		        if (img.hasClass('off')) {
	            selected.include("landmarks");
	            mapInstance.setActiveCategories(selected);
		          img.removeClass('off');
		        } else {
	            selected.remove("landmarks");
	            mapInstance.setActiveCategories(selected);		        
		          img.addClass('off');
		        }
	        }
	        return false;
        }
        var tmp = mapInstance.getActiveCategories();
        if (tmp != null && tmp.contains("landmarks")) {
          activateLandmarks.onclick();
        }
      }
      

      var transportation = $('transportation');
      var activateTransportation = $('activateTransportation');
      if (transportation && activateTransportation) {
        activateTransportation.onclick = function() {
          var selected = mapInstance.getActiveCategories();
          if (null == selected) {
            selected = [];
          }
          var img = $E('img', transportation);
          if (!img) {
            img = new Asset.image(
              '/assets/helsinki/img/transportation.gif'
            );
            img.setStyles({
              'position':'absolute',
              'left':0,
              'top':0
            });            
            img.injectInside(transportation);
            selected.include("transportation");
            mapInstance.setActiveCategories(selected);
          } else {
            if (img.hasClass('off')) {
              selected.include("transportation");
              mapInstance.setActiveCategories(selected);
              img.removeClass('off');
            } else {
              selected.remove("transportation");
              mapInstance.setActiveCategories(selected);            
              img.addClass('off');
            }
          }
          return false;
        }
        var tmp = mapInstance.getActiveCategories();
        if (tmp != null && tmp.contains("transportation")) {
          activateTransportation.onclick();
        }
      }      
      
    },
    scrollTo: function(x, y, duration) 
    {
      if (!duration) {
        duration = 500;
      }
      var left = -x + 277;
      var top  = -y + 257;
      if (left > 0) {
        left = 0;
      }
      if (left < this.config.maxX) {
        left = this.config.maxX;
      }
      if (top > 0) {
        top = 0;
      }
      if (top < this.config.maxY) {
        top = this.config.maxY;
      }
      var mapInstance = this;
	    var scroll = new Fx.Styles(mapInstance.container, {
	      duration: duration, 
	      onComplete: function() {mapInstance.setMapPosition();}
	    }).start({
	       'left': left,
	       'top': top
	    });
    
    },
    addBullet: function() 
    {
      var mapInstance = this;
      var addBullet = $('addBullet');
      if (addBullet) {
        addBullet.makeDraggable({
          onComplete: function() {
            var viewportPosition = $('viewport').getPosition();
            var viewportSize = $('viewport').getSize();
            var bulletPosition = $('addBullet').getPosition();
            var mapPosition = $('map').getPosition();
            var reposition = false;
            
            if (bulletPosition.x - mapPosition.x < 0 || -bulletPosition.x + mapPosition.x < mapInstance.config.maxX-550) {
              reposition = true;
            }

            if (bulletPosition.y - mapPosition.y < 0 || -bulletPosition.y + mapPosition.y < mapInstance.config.maxY-550) {
              reposition = true;
            }
                        
            if (reposition) {
              $('addBullet').setStyles({left: 125, top: 80});
              return;
            }
            $('addBullet').injectInside($('overlay'));
            $('addBullet').setStyles({
             'left': (bulletPosition.x - mapPosition.x),
             'top': (bulletPosition.y - mapPosition.y)         
            });
            
		        $('mapX').value = $('addBullet').getStyle('left').toInt() + 16;
		        $('mapY').value = $('addBullet').getStyle('top').toInt() + 38;
            
            mapInstance.scrollTo($('addBullet').getStyle('left').toInt(), $('addBullet').getStyle('top').toInt());
            $('addBullet').removeEvents();
            $('addBullet').makeDraggable({
              overflown: [$('map')],
              limit: {x: [0, -mapInstance.config.maxX+515], y: [0, -mapInstance.maxY+280]},
              onDrag: function() {
              },
              onComplete: function() {
		            $('mapX').value = $('addBullet').getStyle('left').toInt() + 16;
		            $('mapY').value = $('addBullet').getStyle('top').toInt() + 38;
              }
            });
            $ES('#addBullet div').removeClass('off');
            $('add-ok').onclick = function() {
              //$ES('#addBullet a').addClass('off');
              $('pointContent').addClass('off');
              $('addForm').removeClass('off');
              $('pointDataContainer').removeClass('off');
              $('pointDataFader').removeClass('off');
              $('step2').addClass('off');
              $('step3').addClass('off');
              $('step4').addClass('off');
              $('step1').removeClass('off');
              return false;
            }

			// new div for cancel -button
			$ES('#addBulletCancel').removeClass('off');
			// add-cancel button actions
            $('add-cancel').onclick = function() {
              $('pointDataContainer').addClass('off');
              $ES('#addBullet div').addClass('off');
			  $ES('#addBulletCancel').addClass('off');	
              $('addBullet').setStyles({left: 125, top: 80});
              $('addBullet').injectInside($E('#controls .add'));
              mapInstance.addBullet();
              return false;
            }
   
            //$('pointDataContainer').removeClass('off');
          },          
          onDrag: function() {
            //console.log($('addBullet').getPosition());
          }
        });
        addBullet.setStyles({
          left: 125,
          top: 80
        });
      
      }      
    },
    initControls: function() 
    {
      this.initCategories();
      this.addBullet();
      this.initPoints();
      var mapInstance = this;
      if ($('closePointData')) {
        $('closePointData').onclick = function() {
          $('pointDataContainer').addClass('off');
          if ($('mapsearch').hasClass('off')) { 
            $('pointDataFader').addClass('off');
          }
          $('nextPrevPoint').addClass('off');          
          $('addForm').addClass('off');
          $('pointContent').addClass('off');
          return false;
        }
      }
      if ($('close-mapsearch')) {
        $('close-mapsearch').onclick = function() {
          $('mapsearch').addClass('off');
          $('results').addClass('off');
          $('advancedSearch').addClass('off');
          if ($('pointDataContainer').hasClass('off')) { 
            $('pointDataFader').addClass('off');
          }
          return false;
        }
      }
      if ($('close-mapsearch2')) {
        $('close-mapsearch2').onclick = function() {
          $('mapsearch').addClass('off');
          $('results').addClass('off');
          $('advancedSearch').addClass('off');
          if ($('pointDataContainer').hasClass('off')) { 
            $('pointDataFader').addClass('off');
          }
          return false;
        }
      }
      if ($('openAdvancedSearch')) {
        $('openAdvancedSearch').onclick = function() {
          $('results').addClass('off');
          $('pointDataFader').removeClass('off');
          $('mapsearch').removeClass('off');
          $('advancedSearch').removeClass('off');
          return false;
        }
      }

      if ($('openAdvancedSearch2')) {
        $('openAdvancedSearch2').onclick = function() {
          $('results').addClass('off');
          $('pointDataFader').removeClass('off');
          $('mapsearch').removeClass('off');
          $('advancedSearch').removeClass('off');
          return false;
        }
      }
      
       var commentForm = $E('#textContent form');
       if (commentForm) {
         commentForm.addEvent('submit', function(e) {
           new Event(e).stop();
           this.send({
            evalResponse: true,
            onComplete: function(data)
            {
              $E('.commentField', commentForm).value = '';
              if (data) {
                mapInstance.updatePointComments(Json.evaluate(data));
              }
            }
           });
         });
        
       }
      
      if ($('pointDataFader') && $('mapsearch')) {
        if (!$('pointDataFader').hasClass('off') && !$('mapsearch').hasClass('off')) {
          new Fx.Scroll(window, {duration: 1000, fps: 24}).scrollTo(0, 650); 
        }
      }
      
      if ($('addForm')) {
        $E('#addForm #step1 .submit input').addEvent('click', function(e) {
          new Event(e).stop();   
          var errors = {
            'category': true,
            'season': true,
            'time': true
          };
                    
          $ES('#form-categories input').each(function(input) {
            if (input.getValue()) {
              errors['category'] = false;
            }
          });
          
          $ES('#form-seasons input').each(function(input) {
            if (input.getValue()) {
              errors['season'] = false;
            }
          });
          
          $ES('#form-times input').each(function(input) {
            if (input.getValue()) {
              errors['time'] = false;
            }
          });

          var submitForm = true;
          var hash = new Hash(errors);
          hash.each(function(value, key) {
            if (!value) {
              $(key + 'Error').addClass('off');
            } else {
              $(key + 'Error').removeClass('off');
              submitForm = false;
            }
          });
          if (submitForm) {
            $('step1').addClass('off');
            $('step2').removeClass('off');
          }
        });
        
        $E('#addForm #step2 .submit input').addEvent('click', function(e) {
          new Event(e).stop();
          if ($E('#addForm form').elements['add[title]'].value.trim() != '') {
            $('step2').addClass('off');
            $('step3').removeClass('off');
          } else {
            $('titleError').removeClass('off');
          }
        });
        $E('#step3 .submit input').addEvent('click', function(e) {
          new Event(e).stop();   
          $('step3').addClass('off');
          $('step4').removeClass('off');
        });
        
      } 
      
      if ($('nextPrevPoint')) {
        var nextPoint = $E('#nextPrevPoint .next');
        var prevPoint = $E('#nextPrevPoint .previous');
        
        nextPoint.addEvent('click', mapInstance.toNextPrevPoint);
        prevPoint.addEvent('click', mapInstance.toNextPrevPoint);
        
      }
      
      if ($('controls')) {
        var map = this;
	      $E('#controls .up').onclick = function() {
	        var from = -map.getOffset().top;
	        var to = from+map.config.slideY;
	        if (to > 0) {
	          to = 0;
	        }
	        if (from < 0) {
	          var slide = new Fx.Style(map.container, 'top', {
	           onComplete: function() {
	             mapInstance.setMapPosition();
             },
	           fps: 20,
	           duration:400
           });
	          slide.start(from, to);
	        }
	      }
	      $E('#controls .down').onclick = function() {
	        var from = map.container.getStyle('top').toInt();
	        var to = from-map.config.slideY;
	        if (to < map.config.maxY) {
	          to = map.config.maxY;
	        }
	        if (from > map.config.maxY) {
	          var slide = new Fx.Style(map.container, 'top', {
	           onComplete: function() {mapInstance.setMapPosition();},
	           fps: 20,
	           duration:400
           });
	          slide.start(from, to);
	        }
	      }
	      $E('#controls .left').onclick = function() {
	        var from = map.container.getStyle('left').toInt();
	        var to = from+map.config.slideX;
	        if (to > 0) {
	          to = 0;
	        }
	        if (from < 0) {
	          var slide = new Fx.Style(map.container, 'left', {
	            onComplete: function() {mapInstance.setMapPosition();},
	            fps: 20,
	            duration:400
            });
	          slide.start(from, to);
	        }
	      }
	      $E('#controls .right').onclick = function() {
	        var from = map.container.getStyle('left').toInt();
	        var to = from-map.config.slideX;
	        if (to < map.config.maxX) {
	          to = map.config.maxX;
	        }
	        if (from > map.config.maxX) {
	          var slide = new Fx.Style(map.container, 'left', {
	            onComplete: function() {mapInstance.setMapPosition();},
	            fps: 20,
	            duration:400
            });
	          slide.start(from, to);
	        }
	      }
      }
      return this;    
    },
    makeDraggable: function()
    {
      var mapInstance = this;      
      this.container.makeDraggable({
        onDrag: function() {
          
        },
        onComplete: function() {
          mapInstance.setMapPosition();
        },
        limit: {x: [this.config.maxX, 0], y: [this.config.maxY, 0]}
      });
      var pos = this.getMapPosition();
      this.container.setStyle('top', pos.y+'px');
      this.container.setStyle('left', pos.x+'px');
      this.container.fireEvent('moveIt');
      if ($('scrollTo')) {
	      var cont = this.container;
	        (function() {
	        var scroll = new Fx.Styles(cont, 
	          {duration: 1000, onComplete: function() {mapInstance.setMapPosition();}}
          ).start({
	          'top': -$('scrollTo').getStyle('top').toInt()+150,
	          'left': -$('scrollTo').getStyle('left').toInt()+260 
	        })}).delay(1500);
      }
      return this;
    },
    createBorder: function()
	  {
	    if (!$('border')) {
	      this.loadTiles();
	      return this;
	    }
	    var mapInstance = this;
	    var imageNames = [], loadedImages = [];
	    imageNames[imageNames.length] = '/assets/helsinki/img/border/0.png'; // todo
	    for (var x = 10; x < 1110; x = x + 10) {
	      var num = x+"";
	      while (num.length < 3)
	        num = '0'+num;
	      imageNames[imageNames.length] = '/assets/helsinki/img/border/r'+num+'.png'
	      imageNames[imageNames.length] = '/assets/helsinki/img/border/l'+num+'.png'
	    }
	    imageNames[imageNames.length] = '/assets/helsinki/img/border/1110.png';
	    
	    imageNames.each(function(name) {
	     
	      var el = new Element('img', {'src': name});
        if (!window.ie) {
          el.setStyles({
            'position': 'static',
            'display': 'block',
            'clear': 'left'
          });
          if (el.src.test(/r([0-9]+)\.png$/)) {
             el.addClass('r');
             el.setStyle('float', 'right');
          } else {
            el.setStyle('float', 'left');
          }
	      } else {
	      
            if (el.src.test(/r([0-9]+)\.png$/)) {
             var subPos = el.src.search(/r([0-9]+)\.png$/)+1;
             el.setStyles({
                 'display': 'block',
                 'position': 'absolute',
                 'float': 'right',
                 'right': 0,
                 'height': 5,
                 'top': el.src.substr(subPos, el.src.lastIndexOf('.')+subPos).toInt() / 10 * 5 + 10
             });
            } else {
              if (el.src.test(/l([0-9]+)\.png$/)) {
               var subPos = el.src.search(/l([0-9]+)\.png$/)+1;
               el.setStyles({
                   'display': 'block',
                   'position': 'absolute',
                   'float': 'left',
                   'left': 0,
                   'height': 5,
                   'top': el.src.substr(subPos, el.src.lastIndexOf('.')+subPos).toInt() / 10 * 5 + 10
               });
              } else {
               var top = 565;
               var height = 30;
               if (el.src.test(/\/0\.png$/)) {
                 top = 0;
                 height = 15;
               }
               el.setStyles({
                   'display': 'block',
                   'position': 'absolute',
                   'float': 'left',
                   'left': 0,
                   'height': height,
                   'top': top
               });              
              }
             }	      
	      
	      
	      }
	      el.injectInside($('border'));
	    });
      if (!Cookie.get('notificationShown')) {
        mapInstance.activateLoaderButton();
        if ($('border').hasClass('show')) {
          $('border').setStyle('visibility', 'visible');
        }
      } else {
        mapInstance.showControls();
      } 
	    
	    return this;
	  },
	  activateLoaderButton: function()
	  {
	    var el = $E('#loading img.btn');
	    var mapInstance = this;
	    if (el) {
	      el.src = '/assets/helsinki/img/step/btn_start.gif';
	      el.onclick = function() {
	       Cookie.set('notificationShown', true);
	       mapInstance.showControls();
	       return false;
	      }
	    }
	    var el = $E('#loading img.wait');
	    if (el) {
	     el.setStyle('display', 'none');
	    }
	  },

	  getOffset: function()
	  {
      return {
        top: -this.container.getStyle('top').toInt(), 
        left: -this.container.getStyle('left').toInt()
      };
	  },
	  
	  getMapCenter: function() 
	  {
	   var offset = this.getOffset();
	   return {top: offset.top+297, left: offset.left+297}
	  },
	  
	  createPoints: function(points)
	  {
	   if (points) {
	     points.each(function(point) {
	       if (!$('point-' + point.id)) {
	         var overlay = $('overlay');
	         var div = $E('.' + point.category_id, overlay);
	         if (!div) {
	           var div = new Element('div', {
	             'class': point.category_id
	           }); 
	           div.injectInside(overlay);
	         }
		       var a = new Element('a', {
		         id: 'point-' + point.id,
		         'class': 'mapPoint',
		         styles: {
		           'position': 'absolute',
		           'left': point.x + map.config.pointOffset.x,
		           'top': point.y + map.config.pointOffset.y
		         }
		       });
		       a.injectInside(div);
           a.addEvent('click', function(e) {
             map.showPoint(a.id.substr(6));
             new Event(e).stop();
           });
	       }
	     });
	     map.updateNextPrevTitles();
	   }
	  },
	  showPoint: function(pointId) {
	    var mapInstance = this;
	    if ($E('#pointData .commentField')) {
	      $E('#pointData .commentField').value = '';
      }
	    $('addForm').addClass('off');
	    $('pointDataFader').removeClass('off');
	    if ($('mapsearch').hasClass('off')) {
	     $('nextPrevPoint').removeClass('off');
	    } 
			var jSonRequest = new Json.Remote("/helsinki/json/point", {
			  onComplete: function(point) {
			    mapInstance.scrollTo(point.x + + map.config.pointOffset.x, point.y + + map.config.pointOffset.y);
			    mapInstance.activePoint = point;
			    mapInstance.updateNextPrevTitles();
			    $('pointDataContainer').removeClass('off');
			    $('pointContent').removeClass('off');
			    $('pointTitle').setProperty('class', '')
			    $('pointTitle').addClass(point.category.id);
			    $E('#pointTitle .category span').setText(point.category.title); 
			    $E('#pointTitle h2').setText(point.title);
			    var sender = $E('#pointTitle .sender a'); 
			    sender.setText(point.user);
			    sender.href = '/helsinki/kayttajat/' + point.user;
			    
			    var season = $('pointSeason');
			    season.setProperty('class', '')
			    season.addClass(point.season.id);
			    if (point.time) {
				    var timeImg = $E('img', season.id);
				    timeImg.src = timeImg.src.substr(0, timeImg.src.lastIndexOf('/')+1) + 'time-' + point.time.id + '.png';
				    $E('span', season.id).setText(point.seasonName);
			    }
			    if (point.impact) {
			     var impact = $E('#pointImpact p');
			       var html = '';
			       point.impact.each(function(obj) {
			         if (html != '') {
			           html += '<br />';
			         }
			         html += obj.title;
			       });
			       impact.setHTML(html);
			    }
			    /*
			    if (point.tags) {
			     var tagContainer = $E('#description .tags');
			     tagContainer.setHTML('');
			     point.tags.each(function(tag) {
			       var a = new Element('a', {'href': '/helsinki/?q=' + tag});
			       a.setText(tag);
			       a.injectInside(tagContainer);
			       tagContainer.appendText(" ");
			     });
			    }
			    */
          var imgCont = $E('#textContent .image').empty();
			    if (point.filename && point.filename != '') {
			      var a = new Element('a', {'target': '_blank', 'href': '/helsinki/index/image/id/' + point.id + '/size/original/file/' + point.filename});
			      var img = new Asset.image('/helsinki/index/image/id/' + point.id + '/size/265/file/image.jpg');
			      img.injectInside(a);
			      a.injectInside(imgCont);
			    }
			    $E('#textContent .text').setHTML(point.text);
			    if (point.comments) {
			      mapInstance.updatePointComments(point.comments);
			    }
		      var commentForm = $E('#textContent form');
		      if (commentForm) {
		         $E('.pointId', commentForm).setProperty('value', point.id);
			    }
			  }
			}).send({'id': pointId});            
	  },
	  getAllPoints: function() 
	  {
        var parents = $ES('#overlay div');
        var all = [];
        parents.each(function(parent) {
          if (!parent.hasClass('off')) {
            all.merge($ES('a.mapPoint', parent));
          }
        });
        return all;	  
	  },
	  toNextPrevPoint: function(e)
	  {
	    new Event(e).stop();
	    if (map.activePoint) {
	      var isNext = true;
	      if (this.hasClass('previous')) {
	        isNext = false;
	      }
	      var current = $('point-' + map.activePoint.id);
	      
	      var parents = $ES('#overlay div');
	      var all = map.getAllPoints();
	      if (all && current) {
	        var index = all.indexOf(current);
	        if (isNext) {
	          index++;
	          if (index > all.length - 1) {
	           index = 0;
	          }
	        } else {
	         index--;
	         if (index < 0) {
	           index = all.length - 1;
	         }
	        }
	        map.updateNextPrevTitles();
	        map.showPoint(all[index].id.substr(6));
	      }
	    }
	  },
	  updateNextPrevTitles: function()
	  {
	  if (!this.activePoint) {
	   $('nextPrevPoint').addClass('off');
	   return;
	  }
     var current = $('point-' + map.activePoint.id);
     if (!current) {
      $('nextPrevPoint').addClass('off');
      return;
     }
     var all = map.getAllPoints();
	   var index = all.indexOf(current);
     var next = index+1;
     if (next > all.length - 1) {
       next = 0;
     }
     var title = $E('#categories .'+all[next].getParent().className).getText();
     $E('#nextPrevPoint .next').setHTML('Seuraava ' + title.toLowerCase() + ' merkint&auml;');

     var prev = index-1;
     if (prev < 0) {
       prev = all.length - 1;
     }
     var title = $E('#categories .'+all[prev].getParent().className).getText();
     $E('#nextPrevPoint .previous').setHTML('Edellinen ' + title.toLowerCase() + ' merkint&auml;');
	  },
	  updatePointComments: function(comments)
	  {
	    if (comments) {
	      var container = $E('#textContent .oldComments');
        container.empty();
	      comments.each(function(comment){
	        var div = new Element('div');
	        var h = new Element('h5');
	        h.setHTML(comment.created + ' - <a href="/helsinki/kayttajat/' + comment.nick + '">' + comment.nick + '</a>');
	        h.injectInside(div);
	        var p = new Element('p');
	        p.setHTML(comment.text);
	        p.injectInside(div);
	        div.injectInside(container);
	      }); 
	    }
	  }
});

function initTaskPage()
{
  var forms = $ES('form.taskReplyCommentForm');
  if (forms) {
    forms.each(function(form) {
      form.addEvent('submit', function(e) {
        new Event(e).stop();
        var answerId = this.action.substr(this.action.lastIndexOf('/')+1);

        this.send({
         onComplete: function(data)
         {
           $E('.taskReplyCommentField', form).value = '';
           loadTaskComments(answerId);         
         }
        });

        
      });
    });
  }
  var commentLinks = $ES('a.showComments');
  if (commentLinks) {
    commentLinks.each(function(link) {
      var answerId = link.id.substr(link.id.lastIndexOf('-') + 1);
			link.addEvent('click', function(e) {
        new Event(e).stop();
        var container = $("answerComments-" + answerId);
        var commentContainer = $E('.comments', container);
        if (container.hasClass('off')) {
          link.setHTML('&raquo; Piilota kommentit');
          loadTaskComments(answerId);
		    } else {
		      link.setHTML('&raquo; N&auml;yt&auml; kommentit');
		      container.addClass('off');
		    }
      });
    });
  } 
}

function loadTaskComments(answerId)
{
  var container = $("answerComments-" + answerId);
  var commentContainer = $E('.comments', container);
  var jSonRequest = new Json.Remote("/helsinki/json/comments", {
    onComplete: function(comments) {
      updateTaskComments(container, commentContainer, comments);
    }
   }).send({'answerId': answerId});  
}

function updateTaskComments(container, commentContainer, comments)
{
  if (comments) {
      commentContainer.setHTML('');
      container.removeClass('off');
      comments.each(function(comment) {
        var div = new Element('div', {'class': 'comment'});
        var h = new Element('h5');
        h.setHTML(comment.created + ' - <a href="/helsinki/kayttajat/' + comment.nick + '">' + comment.nick + '</a>');
        h.injectInside(div);
        var p = new Element('p');
        p.setHTML(comment.text);
        p.injectInside(div);
        div.injectInside(commentContainer);
      });
    }

} 

function repositionElements()
{
  if (window.getWidth() < 1000) {
    if ($('categories'))
      $('categories').setStyle('left', 500);
    if ($('controls')) 
      $('controls').setStyle('left', '500px');
    if ($E('#bg .right')) 
      $E('#bg .right').setStyle('left', '500px');
  } else {
    if ($('categories'))
      $('categories').setStyle('left', '50%');
    if ($('controls')) 
      $('controls').setStyle('left', '50%');
    if ($E('#bg .right')) 
      $E('#bg .right').setStyle('left', '50%');
  }
}

window.addEvent('resize', repositionElements);