var AMapRatioScaleControl = AMapPartBase.extend({

  mapPartInit: function(map, wrapper){
    var wrapperStyle = {
      "width": "220px",
      "height": "30px",
			"padding-left": "5px",
      "background-image": "url('map_ruller.png')",
      "background-repeat": "no-repeat",
      "background-position": "left"
    };
    
    wrapper.setStyles(wrapperStyle);
    wrapper.fixPng();
     
    this.map = map;
    this.onScaleChange = { bound: this.setRatio.bind(this) };    
    this.map.addEvent('onScaleChanged', this.onScaleChange.bound);    
      
    var rullerStyle = {
      "display": "block",
      "width": "39px",
      "float": "left",
      "text-align": "left",
      "font": "11px Arial",
      "margin-top": "1px"
    };
    
    for(var i = 0; i < 5; i++) {
      var ruller = new Element("span");
      ruller.setAttribute("id", "map-ruller-" + i);
      ruller.setStyles(rullerStyle);
      wrapper.appendChild(ruller);      
    }
    ruller = new Element("span");
    ruller.setAttribute("id", "map-ruller-unit");
    ruller.setStyles(rullerStyle);
    ruller.style.width = "auto";
    wrapper.appendChild(ruller);
    
    this.setRatio();  
  },

  getDefaultPosition: function() {
    return new APosition(ACorner.LEFT_BOTTOM, new ASize(7, 7));
  },
  
  setRatio: function() {
    var scale = this.map.getCurrentScaleInfo().scale;
    var cm = scale > 25000 ? scale / 200000 : scale / 200;
    for(var i = 0; i < 5; i++)
      $("map-ruller-" + i).innerHTML = cm * i;
    $("map-ruller-unit").innerHTML = scale > 25000 ? "km" : "m";
  }
  
});