/public/javascripts/app/home.js

GoogleMapApi = Service.GoogleMapApi = function() {
	this.map = null;
	this.bounds = new google.maps.LatLngBounds();
	this.infoWindow = new google.maps.InfoWindow();
	this.markers = [];
	this.markerCluster = null;
};

GoogleMapApi.DEFAULT_LAT = 12.565679;
GoogleMapApi.DEFAULT_LNG = 104.990963
GoogleMapApi.ZOOM_LEVEL = 7;
GoogleMapApi.MAX_ZOOM_LEVEL = 14;


GoogleMapApi.prototype.initializeMap = function(canvas) {
	var latlng = new google.maps.LatLng(GoogleMapApi.DEFAULT_LAT, GoogleMapApi.DEFAULT_LNG);
	var myOptions = {
		zoom: GoogleMapApi.ZOOM_LEVEL,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	this.map = new google.maps.Map(canvas, myOptions);
	var mcOptions = {gridSize: 60, maxZoom:14, zoomOnClick:true };
	this.markerCluster = new MarkerClusterer(this.map,this.markers,mcOptions); };

GoogleMapApi.prototype.createMarker = function(optionData){

	var latLng = this.newLatLng(optionData.lat, optionData.lng);
	var option = optionData;
	option.position = latLng;
	this._calculateBounds(latLng);
	marker = new google.maps.Marker(option);
	this.markerCluster.addMarker(marker);
	return marker;
};

GoogleMapApi.prototype.refresh = function(){
	this.markerclusterer.redraw();
};

GoogleMapApi.prototype.createDraggableMarker = function(title, lat, lng, icon){
	var latLng = this.newLatLng(lat, lng);
	var option = {
		position: latLng,
		title: title,
		map: this.map,
		icon:icon,
		draggable:true
	};
	marker = new google.maps.Marker(option);
	return marker;
};


GoogleMapApi.prototype._calculateBounds = function(latLng){
		this.bounds.extend(latLng);
};

GoogleMapApi.prototype.fitBounds = function(){
	this.map.fitBounds(this.bounds);
	var zoomLevel = this.map.getZoom();
	if(zoomLevel > GoogleMapApi.MAX_ZOOM_LEVEL){
		this.map.setZoom(GoogleMapApi.MAX_ZOOM_LEVEL);
		this.bounds = this.map.getBounds();
	}
};

GoogleMapApi.prototype.newLatLng = function(lat, lng){
  return new google.maps.LatLng(lat, lng);
};

GoogleMapApi.prototype.setMarkerPosition = function(marker, latLng) {
	marker.setPosition(latLng);
};

GoogleMapApi.prototype.addMarkerClickListener = function(marker, data, handler){
  google.maps.event.addListener(marker, 'click', function() {
    handler(data);
  });
};

GoogleMapApi.prototype.addMapClickListener = function(e){
  google.maps.event.addListener(this.map, 'click', function(point) {
    e.click(point.latLng.lat(), point.latLng.lng());
  });
};

GoogleMapApi.prototype.moveMarkerTo = function(marker, lat, lng){
  marker.setMap(this.map);
  marker.setPosition(this.newLatLng(lat, lng));
  return marker;
};

GoogleMapApi.prototype.removeMarker = function(marker){
  marker.setMap(null);
};

GoogleMapApi.prototype.setIcon = function(marker, icon){
  if(icon)
    marker.setIcon(icon);
};

GoogleMapApi.prototype.setShadow = function(marker, imageUrl){
  var shadow = new google.maps.MarkerImage(imageUrl, null, null, new google.maps.Point(16, 32));
  marker.setShadow(shadow);
};

GoogleMapApi.prototype.addListener = function(obj, eventName, handler){
	google.maps.event.addListener(obj, eventName, handler);
};

GoogleMapApi.prototype.addMarkerClickListener = function(marker, data, handler){
	google.maps.event.addListener(marker, 'click', function(){
		handler(data);
	});
};

GoogleMapApi.prototype.setMarkerDraggability = function(marker,draggability){
	marker.setDraggable(draggability);
};

GoogleMapApi.prototype.getAllMarkers = function(){
	return this.markers;
};

GoogleMapApi.prototype.clearAllMarkers = function(){
    this.markerCluster.clearMarkers();
};

GoogleMapApi.prototype.attachDataToMarker = function(marker,key,value){
	if(!marker.data)
		marker.data={};
	marker.data[key]=value;
};

GoogleMapApi.prototype.processMarkerVisibility = function(){
    this.markerCluster.processMarkersVisibility(true);
};

GoogleMapApi.prototype.updateMarkerClusterer = function(resource,redraw){
   var markers = this.markerCluster.getMarkers();
	 var tempMarker = null;
   for(var i=0; i< markers.length; i++){
		if(markers[i].id == resource.id ){

			var latLng = this.newLatLng(resource.lat, resource.lng);
			markers[i].setPosition(latLng);
			if(redraw)
				this.markerCluster.processMarkersVisibility(true);
			return true;
		}
   }
   return false;

};


GoogleMapApi.prototype.getCenter = function(){
  return  this.map.getCenter();
};

GoogleMapApi.prototype.setCenter = function(latLng){
  return  this.map.panTo(latLng);
};

GoogleMapApi.prototype.setZoom = function(level){
  return  this.map.setZoom(level);
};

GoogleMapApi.prototype.getMap = function(){
  return  this.map;
};






/**
 * @name MarkerClusterer for Google Maps v3
 * @version version 1.0
 * @author Luke Mahe
 * @fileoverview
 * The library creates and manages per-zoom-level clusters for large amounts of
 * markers.
 * <br/>
 * This is a v3 implementation of the
 * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
 * >v2 MarkerClusterer</a>.
 */

/**
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


/**
 * A Marker Clusterer that clusters markers.
 *
 * @param {google.maps.Map} map The Google map to attach to.
 * @param {Array.<google.maps.Marker>} opt_markers Optional markers to add to
 *   the cluster.
 * @param {Object} opt_options support the following options:
 *     'gridSize': (number) The grid size of a cluster in pixels.
 *     'maxZoom': (number) The maximum zoom level that a marker can be part of a
 *                cluster.
 *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
 *                    cluster is to zoom into it.
 *     'averageCenter': (boolean) Wether the center of each cluster should be
 *                      the average of all markers in the cluster.
 *     'styles': (object) An object that has style properties:
 *       'url': (string) The image url.
 *       'height': (number) The image height.
 *       'width': (number) The image width.
 *       'anchor': (Array) The anchor position of the label text.
 *       'textColor': (string) The text color.
 *       'textSize': (number) The text size.
 * @constructor
 * @extends google.maps.OverlayView
 */
function MarkerClusterer(map, opt_markers, opt_options) {
  this.extend(MarkerClusterer, google.maps.OverlayView);
  this.map_ = map;

  /**
   * @type {Array.<google.maps.Marker>}
   * @private
   */
  this.markers_ = [];

  /**
   *  @type {Array.<Cluster>}
   */
  this.clusters_ = [];

  this.sizes = [53, 56, 66, 78, 90];

  /**
   * @private
   */
  this.styles_ = [];

  /**
   * @type {boolean}
   * @private
   */
  this.ready_ = false;

  var options = opt_options || {};

  /**
   * @type {number}
   * @private
   */
  this.gridSize_ = options['gridSize'] || 60;

  /**
   * @type {?number}
   * @private
   */
  this.maxZoom_ = options['maxZoom'] || 20;

  this.styles_ = options['styles'] || [];

  /**
   * @type {string}
   * @private
   */
  this.imagePath_ = options['imagePath'] ||
      this.MARKER_CLUSTER_IMAGE_PATH_;

  /**
   * @type {string}
   * @private
   */
  this.imageExtension_ = options['imageExtension'] ||
      this.MARKER_CLUSTER_IMAGE_EXTENSION_;

  /**
   * @type {boolean}
   * @private
   */
  this.zoomOnClick_ = true;

  if (options['zoomOnClick'] != undefined) {
    this.zoomOnClick_ = options['zoomOnClick'];
  }

  /**
   * @type {boolean}
   * @private
   */
  this.averageCenter_ = false;

  if (options['averageCenter'] != undefined) {
    this.averageCenter_ = options['averageCenter'];
  }

  this.setupStyles_();

  this.setMap(map);

  /**
   * @type {number}
   * @private
   */
  this.prevZoom_ = this.map_.getZoom();

  var that = this;
  google.maps.event.addListener(this.map_, 'zoom_changed', function() {
    var maxZoom = that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom;
    var zoom = that.map_.getZoom();
    if (zoom < 0 || zoom > maxZoom) {
      return;
    }

    if (that.prevZoom_ != zoom) {
      that.prevZoom_ = that.map_.getZoom();
	  if(zoom > that.maxZoom_)
      	that.resetViewport();  //Ilab modification default behavior
	  else
       that.processMarkersVisibility();
    }

  });

  google.maps.event.addListener(this.map_, 'idle', function() {
    that.redraw();
  });

  if (opt_markers && opt_markers.length) {
    this.addMarkers(opt_markers, false);
  }
}


/**
 * The marker cluster image path.
 *
 * @type {string}
 * @private
 */





MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = SETTING.WEBROOT + 'images/clusterer/m';






/**
 * The marker cluster image path.
 *
 * @type {string}
 * @private
 */
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';


/**
 * Extends a objects prototype by anothers.
 *
 * @param {Object} obj1 The object to be extended.
 * @param {Object} obj2 The object to extend with.
 * @return {Object} The new extended object.
 * @ignore
 */
MarkerClusterer.prototype.extend = function(obj1, obj2) {
  return (function(object) {
    for (property in object.prototype) {
      this.prototype[property] = object.prototype[property];
    }
    return this;
  }).apply(obj1, [obj2]);
};


/**
 * Implementaion of the interface method.
 * @ignore
 */
MarkerClusterer.prototype.onAdd = function() {
  this.setReady_(true);
};

/**
 * Implementaion of the interface method.
 * @ignore
 */
MarkerClusterer.prototype.draw = function() {};

/**
 * Sets up the styles object.
 *
 * @private
 */
MarkerClusterer.prototype.setupStyles_ = function() {
  if (this.styles_.length) {
    return;
  }

  for (var i = 0, size; size = this.sizes[i]; i++) {
    this.styles_.push({
      url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
      height: size,
      width: size
    });
  }
};


/**
 *  Sets the styles.
 *
 *  @param {Object} styles The style to set.
 */
MarkerClusterer.prototype.setStyles = function(styles) {
  this.styles_ = styles;
};


/**
 *  Gets the styles.
 *
 *  @return {Object} The styles object.
 */
MarkerClusterer.prototype.getStyles = function() {
  return this.styles_;
};


/**
 * Whether zoom on click is set.
 *
 * @return {boolean} True if zoomOnClick_ is set.
 */
MarkerClusterer.prototype.isZoomOnClick = function() {
  return this.zoomOnClick_;
};

/**
 * Whether average center is set.
 *
 * @return {boolean} True if averageCenter_ is set.
 */
MarkerClusterer.prototype.isAverageCenter = function() {
  return this.averageCenter_;
};


/**
 *  Returns the array of markers in the clusterer.
 *
 *  @return {Array.<google.maps.Marker>} The markers.
 */
MarkerClusterer.prototype.getMarkers = function() {
  return this.markers_;
};


/**
 *  Returns the array of markers in the clusterer.
 *
 *  @return {Array.<google.maps.Marker>} The number of markers.
 */
MarkerClusterer.prototype.getTotalMarkers = function() {
  return this.markers_;
};


MarkerClusterer.prototype.processMarkersVisibility = function(redraw) {
    var markers = this.getMarkers(); // 10  marker.isAdd ==
    this.resetViewport();
    var data = this.getData(); // data = {1:false,2:false}
    if(data){
        for(var i=0;i<markers.length;i++){
          for(var layer_id in data){
            var visible = data[layer_id];
            if(markers[i].layer_id == layer_id && visible==false){
                markers[i].isAdded = true;
            }
          }
        }
    }
	if(redraw)
    	this.redraw();
};

MarkerClusterer.prototype.setData = function(data) {
    this.data = data;
};

MarkerClusterer.prototype.getData = function() {
   var data =  Util.Cookies.getAsObject("activeLayers");
   var interestedLayers = {};
	for(var layer_id in data){
		if(data[layer_id]==false)
			interestedLayers[layer_id] = false;
	}
	return interestedLayers;
};
/**
 *  Sets the max zoom for the clusterer.
 *
 *  @param {number} maxZoom The max zoom level.
 */
MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
  this.maxZoom_ = maxZoom;
};


/**
 *  Gets the max zoom for the clusterer.
 *
 *  @return {number} The max zoom level.
 */
MarkerClusterer.prototype.getMaxZoom = function() {
  return this.maxZoom_ || this.map_.mapTypes[this.map_.getMapTypeId()].maxZoom;
};


/**
 *  The function for calculating the cluster icon image.
 *
 *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 *  @param {number} numStyles The number of styles available.
 *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 *  @private
 */
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
  var index = 0;
  var count = markers.length;
  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index
  };
};


/**
 * Set the calculator function.
 *
 * @param {function(Array, number)} calculator The function to set as the
 *     calculator. The function should return a object properties:
 *     'text' (string) and 'index' (number).
 *
 */
MarkerClusterer.prototype.setCalculator = function(calculator) {
  this.calculator_ = calculator;
};


/**
 * Get the calculator function.
 *
 * @return {function(Array, number)} the calculator function.
 */
MarkerClusterer.prototype.getCalculator = function() {
  return this.calculator_;
};


/**
 * Add an array of markers to the clusterer.
 *
 * @param {Array.<google.maps.Marker>} markers The markers to add.
 * @param {boolean} opt_nodraw Whether to redraw the clusters.
 */
MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
  for (var i = 0, marker; marker = markers[i]; i++) {
    this.pushMarkerTo_(marker);
  }
  if (!opt_nodraw) {
    this.redraw();
  }
};


/**
 * Pushes a marker to the clusterer.
 *
 * @param {google.maps.Marker} marker The marker to add.
 * @private
 */
MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
  marker.setVisible(false);
  marker.setMap(null);
  var data = Util.Cookies.getAsObject("activeLayers");

  marker.isAdded = false;
  for(var layer_id in data){
    var visible = data[layer_id];
    if(marker.layer_id == layer_id && visible==false){
        marker.isAdded = true;
    }
  }

  if (marker['draggable']) {
    var that = this;
    google.maps.event.addListener(marker, 'dragend', function() {
      marker.isAdded = false;
      that.resetViewport();
      that.redraw();
    });
  }
  this.markers_.push(marker);
};


/**
 * Adds a marker to the clusterer and redraws if needed.
 *
 * @param {google.maps.Marker} marker The marker to add.
 * @param {boolean} opt_nodraw Whether to redraw the clusters.
 */
MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
  this.pushMarkerTo_(marker);
  if (!opt_nodraw) {
    this.redraw();
  }
};


/**
 * Remove a marker from the cluster.
 *
 * @param {google.maps.Marker} marker The marker to remove.
 * @return {boolean} True if the marker was removed.
 */
MarkerClusterer.prototype.removeMarker = function(marker) {
  var index = -1;
  if (this.markers_.indexOf) {
    index = this.markers_.indexOf(marker);
  } else {
    for (var i = 0, m; m = this.markers_[i]; i++) {
      if (m == marker) {
        index = i;
        continue;
      }
    }
  }

  if (index == -1) {
    return false;
  }

  this.markers_.splice(index, 1);
  marker.setVisible(false);
  marker.setMap(null);

  this.resetViewport();
  this.redraw();
  return true;
};


/**
 * Sets the clusterer's ready state.
 *
 * @param {boolean} ready The state.
 * @private
 */
MarkerClusterer.prototype.setReady_ = function(ready) {
  if (!this.ready_) {
    this.ready_ = ready;
    this.createClusters_();
  }
};


/**
 * Returns the number of clusters in the clusterer.
 *
 * @return {number} The number of clusters.
 */
MarkerClusterer.prototype.getTotalClusters = function() {
  return this.clusters_.length;
};


/**
 * Returns the google map that the clusterer is associated with.
 *
 * @return {google.maps.Map} The map.
 */
MarkerClusterer.prototype.getMap = function() {
  return this.map_;
};


/**
 * Sets the google map that the clusterer is associated with.
 *
 * @param {google.maps.Map} map The map.
 */
MarkerClusterer.prototype.setMap = function(map) {
  this.map_ = map;
};


/**
 * Returns the size of the grid.
 *
 * @return {number} The grid size.
 */
MarkerClusterer.prototype.getGridSize = function() {

	/*
	var tran = 50;
	var Ax = this.maxZoom_;
	var By =  this.gridSize_- tran ;
	var x = (this.map_.getZoom()>this.maxZoom)?this.maxZoom:this.map_.getZoom();

	var distance = tran + By-(By/Ax)*x ;


	return distance;
	*/
	return this.gridSize_;
};


/**
 * Returns the size of the grid.
 *
 * @param {number} size The grid size.
 */
MarkerClusterer.prototype.setGridSize = function(size) {
  this.gridSize_ = size;
};


/**
 * Extends a bounds object by the grid size.
 *
 * @param {google.maps.LatLngBounds} bounds The bounds to extend.
 * @return {google.maps.LatLngBounds} The extended bounds.
 */
MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
  var projection = this.getProjection();

  var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
      bounds.getNorthEast().lng());
  var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
      bounds.getSouthWest().lng());

  var trPix = projection.fromLatLngToDivPixel(tr);
  trPix.x += this.gridSize_;
  trPix.y -= this.gridSize_;

  var blPix = projection.fromLatLngToDivPixel(bl);
  blPix.x -= this.gridSize_;
  blPix.y += this.gridSize_;

  var ne = projection.fromDivPixelToLatLng(trPix);
  var sw = projection.fromDivPixelToLatLng(blPix);

  bounds.extend(ne);
  bounds.extend(sw);

  return bounds;
};


/**
 * Determins if a marker is contained in a bounds.
 *
 * @param {google.maps.Marker} marker The marker to check.
 * @param {google.maps.LatLngBounds} bounds The bounds to check against.
 * @return {boolean} True if the marker is in the bounds.
 * @private
 */
MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
  return bounds.contains(marker.getPosition());
};


/**
 * Clears all clusters and markers from the clusterer.
 */
MarkerClusterer.prototype.clearMarkers = function() {
  this.resetViewport();

  this.markers_ = [];
};


/**
 * Clears all existing clusters and recreates them.
 */
MarkerClusterer.prototype.resetViewport = function() {
  for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
    cluster.remove();
  }

  for (var i = 0, marker; marker = this.markers_[i]; i++) {
    marker.isAdded = false;
    marker.setMap(null);
    marker.setVisible(false);
  }

  this.clusters_ = [];
};


/**
 * Redraws the clusters.
 */
MarkerClusterer.prototype.redraw = function() {
  this.createClusters_();
};


/**
 * Creates the clusters.
 *
 * @private
 */
MarkerClusterer.prototype.createClusters_ = function() {
  if (!this.ready_) {
    return;
  }

  var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
      this.map_.getBounds().getNorthEast());
  var bounds = this.getExtendedBounds(mapBounds);

  for (var i = 0, marker; marker = this.markers_[i]; i++) {
    var added = false;
    if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
      for (var j = 0, cluster; cluster = this.clusters_[j]; j++) {
        if (!added && cluster.getCenter() &&
            cluster.isMarkerInClusterBounds(marker)) {
          added = true;
          cluster.addMarker(marker);
          break;
        }
      }

      if (!added) {
        var cluster = new Cluster(this);
        cluster.addMarker(marker);
        this.clusters_.push(cluster);
      }
    }
  }
};


/**
 * A cluster that contains markers.
 *
 * @param {MarkerClusterer} markerClusterer The markerclusterer that this
 *     cluster is associated with.
 * @constructor
 * @ignore
 */
function Cluster(markerClusterer) {
  this.markerClusterer_ = markerClusterer;
  this.map_ = markerClusterer.getMap();
  this.gridSize_ = markerClusterer.getGridSize();
  this.averageCenter_ = markerClusterer.isAverageCenter();
  this.center_ = null;
  this.markers_ = [];
  this.bounds_ = null;
  this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
      markerClusterer.getGridSize());
}

/**
 * Determins if a marker is already added to the cluster.
 *
 * @param {google.maps.Marker} marker The marker to check.
 * @return {boolean} True if the marker is already added.
 */
Cluster.prototype.isMarkerAlreadyAdded = function(marker) {
  if (this.markers_.indexOf) {
    return this.markers_.indexOf(marker) != -1;
  } else {
    for (var i = 0, m; m = this.markers_[i]; i++) {
      if (m == marker) {
        return true;
      }
    }
  }
  return false;
};


/**
 * Add a marker the cluster.
 *
 * @param {google.maps.Marker} marker The marker to add.
 * @return {boolean} True if the marker was added.
 */
Cluster.prototype.addMarker = function(marker) {
  if (this.isMarkerAlreadyAdded(marker)) {
    return false;
  }

  if (!this.center_) {
    this.center_ = marker.getPosition();
    this.calculateBounds_();
  } else {
    if (this.averageCenter_) {
      var lat = (this.center_.lat() + marker.getPosition().lat()) / 2;
      var lng = (this.center_.lng() + marker.getPosition().lng()) / 2;
      this.center_ = new google.maps.LatLng(lat, lng);
      this.calculateBounds_();
    }
  }


  if (this.markers_.length == 0) {
    marker.setMap(this.map_);
    marker.setVisible(true);
  } else if (this.markers_.length == 1) {
    this.markers_[0].setMap(null);
    this.markers_[0].setVisible(false);
  }

  marker.isAdded = true;
  this.markers_.push(marker);

  this.updateIcon();
  return true;
};


/**
 * Returns the marker clusterer that the cluster is associated with.
 *
 * @return {MarkerClusterer} The associated marker clusterer.
 */
Cluster.prototype.getMarkerClusterer = function() {
  return this.markerClusterer_;
};


/**
 * Returns the bounds of the cluster.
 *
 * @return {google.maps.LatLngBounds} the cluster bounds.
 */
Cluster.prototype.getBounds = function() {
  this.calculateBounds_();
  return this.bounds_;
};


/**
 * Removes the cluster
 */
Cluster.prototype.remove = function() {
  this.clusterIcon_.remove();
  this.markers_.length = 0;
  delete this.markers_;
};


/**
 * Returns the center of the cluster.
 *
 * @return {number} The cluster center.
 */
Cluster.prototype.getSize = function() {
  return this.markers_.length;
};


/**
 * Returns the center of the cluster.
 *
 * @return {Array.<google.maps.Marker>} The cluster center.
 */
Cluster.prototype.getMarkers = function() {
  return this.markers_;
};


/**
 * Returns the center of the cluster.
 *
 * @return {google.maps.LatLng} The cluster center.
 */
Cluster.prototype.getCenter = function() {
  return this.center_;
};


/**
 * Calculated the bounds of the cluster with the grid.
 *
 * @private
 */
Cluster.prototype.calculateBounds_ = function() {
  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
};


/**
 * Determines if a marker lies in the clusters bounds.
 *
 * @param {google.maps.Marker} marker The marker to check.
 * @return {boolean} True if the marker lies in the bounds.
 */
Cluster.prototype.isMarkerInClusterBounds = function(marker) {
  return this.bounds_.contains(marker.getPosition());
};


/**
 * Returns the map that the cluster is associated with.
 *
 * @return {google.maps.Map} The map.
 */
Cluster.prototype.getMap = function() {
  return this.map_;
};


/**
 * Updates the cluster icon
 */
Cluster.prototype.updateIcon = function() {
  var zoom = this.map_.getZoom();
  var mz = this.markerClusterer_.getMaxZoom();

  if (zoom > mz) {
    for (var i = 0, marker; marker = this.markers_[i]; i++) {
      marker.setMap(this.map_);
      marker.setVisible(true);
    }
    return;
  }

  if (this.markers_.length < 2) {
    this.clusterIcon_.hide();
    return;
  }

  var numStyles = this.markerClusterer_.getStyles().length;
  var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
  this.clusterIcon_.setCenter(this.center_);
  this.clusterIcon_.setSums(sums);
  this.clusterIcon_.show();
};


/**
 * A cluster icon
 *
 * @param {Cluster} cluster The cluster to be associated with.
 * @param {Object} styles An object that has style properties:
 *     'url': (string) The image url.
 *     'height': (number) The image height.
 *     'width': (number) The image width.
 *     'anchor': (Array) The anchor position of the label text.
 *     'textColor': (string) The text color.
 *     'textSize': (number) The text size.
 * @param {number} opt_padding Optional padding to apply to the cluster icon.
 * @constructor
 * @extends google.maps.OverlayView
 * @ignore
 */
function ClusterIcon(cluster, styles, opt_padding) {
  cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);

  this.styles_ = styles;
  this.padding_ = opt_padding || 0;
  this.cluster_ = cluster;
  this.center_ = null;
  this.map_ = cluster.getMap();
  this.div_ = null;
  this.sums_ = null;
  this.visible_ = false;

  this.setMap(this.map_);
}


/**
 * Triggers the clusterclick event and zoom's if the option is set.
 */
ClusterIcon.prototype.triggerClusterClick = function() {
  var markerClusterer = this.cluster_.getMarkerClusterer();

  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

  if (markerClusterer.isZoomOnClick()) {
    this.map_.panTo(this.cluster_.getCenter());

    this.map_.fitBounds(this.cluster_.getBounds());
  }
};


/**
 * Adding the cluster icon to the dom.
 * @ignore
 */
ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);
    this.div_.innerHTML = this.sums_.text;
  }

  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div_);

  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};


/**
 * Returns the position to place the div dending on the latlng.
 *
 * @param {google.maps.LatLng} latlng The position in latlng.
 * @return {google.maps.Point} The position in pixels.
 * @private
 */
ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  pos.x -= parseInt(this.width_ / 2, 10);
  pos.y -= parseInt(this.height_ / 2, 10);
  return pos;
};


/**
 * Draw the icon.
 * @ignore
 */
ClusterIcon.prototype.draw = function() {
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.top = pos.y + 'px';
    this.div_.style.left = pos.x + 'px';
  }
};


/**
 * Hide the icon.
 */
ClusterIcon.prototype.hide = function() {
  if (this.div_) {
    this.div_.style.display = 'none';
  }
  this.visible_ = false;
};


/**
 * Position and show the icon.
 */
ClusterIcon.prototype.show = function() {
  if (this.div_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);
    this.div_.style.display = '';
  }
  this.visible_ = true;
};


/**
 * Remove the icon from the map
 */
ClusterIcon.prototype.remove = function() {
  this.setMap(null);
};


/**
 * Implementation of the onRemove interface.
 * @ignore
 */
ClusterIcon.prototype.onRemove = function() {
  if (this.div_ && this.div_.parentNode) {
    this.hide();
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};


/**
 * Set the sums of the icon.
 *
 * @param {Object} sums The sums containing:
 *   'text': (string) The text to display in the icon.
 *   'index': (number) The style index of the icon.
 */
ClusterIcon.prototype.setSums = function(sums) {
  this.sums_ = sums;
  this.text_ = sums.text;
  this.index_ = sums.index;
  if (this.div_) {
    this.div_.innerHTML = sums.text;
  }

  this.useStyle();
};


/**
 * Sets the icon to the the styles.
 */
ClusterIcon.prototype.useStyle = function() {
  var index = Math.max(0, this.sums_.index - 1);
  index = Math.min(this.styles_.length - 1, index);
  var style = this.styles_[index];
  this.url_ = style['url'];
  this.height_ = style['height'];
  this.width_ = style['width'];
  this.textColor_ = style['textColor'];
  this.anchor = style['anchor'];
  this.textSize_ = style['textSize'];
};


/**
 * Sets the center of the icon.
 *
 * @param {google.maps.LatLng} center The latlng to set as the center.
 */
ClusterIcon.prototype.setCenter = function(center) {
  this.center_ = center;
};


/**
 * Create the css text based on the position of the icon.
 *
 * @param {google.maps.Point} pos The position.
 * @return {string} The css style text.
 */
ClusterIcon.prototype.createCss = function(pos) {
  var style = [];
  if (document.all) {
    style.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
        'sizingMethod=scale,src="' + this.url_ + '");');
  } else {
    style.push('background:url(' + this.url_ + ');');
  }

  if (typeof this.anchor_ === 'object') {
    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
        this.anchor_[0] < this.height_) {
      style.push('height:' + (this.height_ - this.anchor_[0]) +
          'px; padding-top:' + this.anchor_[0] + 'px;');
    } else {
      style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
          'px;');
    }
    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
        this.anchor_[1] < this.width_) {
      style.push('width:' + (this.width_ - this.anchor_[1]) +
          'px; padding-left:' + this.anchor_[1] + 'px;');
    } else {
      style.push('width:' + this.width_ + 'px; text-align:center;');
    }
  } else {
    style.push('height:' + this.height_ + 'px; line-height:' +
        this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
  }

  var txtColor = this.textColor_ ? this.textColor_ : 'black';
  var txtSize = this.textSize_ ? this.textSize_ : 11;

  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
  return style.join('');
};


window['MarkerClusterer'] = MarkerClusterer;
MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
MarkerClusterer.prototype['clearMarkers'] =
    MarkerClusterer.prototype.clearMarkers;
MarkerClusterer.prototype['getCalculator'] =
    MarkerClusterer.prototype.getCalculator;
MarkerClusterer.prototype['getGridSize'] =
    MarkerClusterer.prototype.getGridSize;
MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
MarkerClusterer.prototype['getTotalClusters'] =
    MarkerClusterer.prototype.getTotalClusters;
MarkerClusterer.prototype['getTotalMarkers'] =
    MarkerClusterer.prototype.getTotalMarkers;
MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
MarkerClusterer.prototype['removeMarker'] =
    MarkerClusterer.prototype.removeMarker;
MarkerClusterer.prototype['resetViewport'] =
    MarkerClusterer.prototype.resetViewport;
MarkerClusterer.prototype['setCalculator'] =
    MarkerClusterer.prototype.setCalculator;
MarkerClusterer.prototype['setGridSize'] =
    MarkerClusterer.prototype.setGridSize;
MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;

Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
Cluster.prototype['getSize'] = Cluster.prototype.getSize;
Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;

ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;
Model.Factory = {
	models: {},

	create: function(modelName){
		if(!this.models[modelName]){
			this.models[modelName] = new Model[modelName];
		}

		return this.models[modelName];
	}
}
Model.LayerManager = function(){
	var _self = this;
	this.layers = [];
	this.myLayers = [];

	Helper.layerHelper = new Helper.LayerHelper(this);

	this.getAllLayers = function(){
		AjaxRequest.get("/layers", function(response) {
			_self._getLayersEventHandler(response);
		});
	}

	this.getLayers = function(user) {
		AjaxRequest.get("/layers?user=" + user, function(response) {
			_self._getLayersEventHandler(response);
		});
	}

	this._getLayersEventHandler = function(response) {
		if(response.status == 200){
			var layersChanged = new Events.LayersEvent(Events.LayersEvent.LAYERS_CHANGED);
			_self.layers = Json.decode(response.responseText);
			GEvent.dispatchEvent(layersChanged);
		}
	}

	this.createLayer = function(data){
		AjaxRequest.post('/layers.json', data, function(response){
			_self._createLayerEventHandler(response);
		});
	}

	this._createLayerEventHandler = function(response){
		if(response.status == 201){
			GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYER_ADDED));
			_self.layers.push(Json.decode(response.responseText));
			GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYERS_CHANGED));
			GEvent.dispatchEvent(new Events.UsersEvent(Events.UsersEvent.USERS_RELOAD));
		}
	}

	this.loadMyLayer = function() {
		var options = {
			url:"/mylayers.json",
			headers:{"auth_token":Authentication.getAuthToken()},
			method:'get',
			success:_self._getMyLayersEventHandler
		};

		Util.Ajax(options);
	}

	this._getMyLayersEventHandler = function(response){
		var _self = this;
		if (response.status == 200){
			_self.myLayers = Json.decode(response.responseText);
			GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MYLAYERS_CHANGED,_self.myLayers));
		}

	}

	this.createMyLayer = function(data){

		var options = {
			url:"/layers.json",
			method:'post',
			params:data,
			success:_self._createMyLayerEventHandler
		};

		Util.Ajax(options);
	}

	this._createMyLayerEventHandler = function(response){
		if(response.status == 201){
			var layer = Json.decode(response.responseText);
			Util.func.setCurrentUserAsLayerOwner(layer);
			_self.layers.push(layer);
			GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MY_LAYER_ADDED,layer));
		}
		else{
			var errors = Json.decode(response.responseText);
			GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MY_LAYER_ADDED_FAILED, errors));
		}
	}

	this.getPublicLayers = function(){
		AjaxRequest.get('/public_layers', function(response){
			_self._getPublicLayersEventHandler(response);
		});
	}

	this._getPublicLayersEventHandler = function(response){
		if(response.status == 200){
			_self.layers = Json.decode(response.responseText);
			var layersChanged = new Events.LayersEvent(Events.LayersEvent.LAYERS_CHANGED);
			GEvent.dispatchEvent(layersChanged);
		}
	}

	this.updateMyLayerStatus = function(data){
		var _self = this;
		var options = {
			url:"/update_my_layer_status.json" ,
			method:'post',
			params: data,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._updateMyLayerStatusHandler
		};
		Util.Ajax(options);
	};

	this._updateMyLayerStatusHandler = function(response){
		if(response.status == 200){
			var datas = Json.decode(response.responseText);
			var layersChanged = new Events.LayersEvent(Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED);
			GEvent.dispatchEvent(layersChanged);
		}
		else{
			var datas = Json.decode(response.responseText);
			var layersChanged = new Events.LayersEvent(Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED_FAILED,datas);
			GEvent.dispatchEvent(layersChanged);
		}
	};

	this.findById = function(id){
		for(var i = 0; i < this.layers.length; i++){
			if(this.layers[i].id == id){
				return this.layers[i];
			}
		}
		return null;
	};

	this.saveMember = function(data){
		var _self = this;
		data  = Json.encode(data);
		var options = {
			url:"/create_membership.json",
			method:'post',
			params: data,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._saveMemberHandler
		};
		Util.Ajax(options);
	};

	this._saveMemberHandler = function(response){
		var data = Json.decode(response.responseText);
		if(response.status == 201) {
			var memberSaved = new Events.MemberEvent(Events.MemberEvent.MEMBER_CREATED,data);
			GEvent.dispatchEvent(memberSaved);
		}
		else if (response.status == 200) {
			var memberSavedFailed = new Events.MemberEvent(Events.MemberEvent.MEMBER_CREATED_FAILED,data);
			GEvent.dispatchEvent(memberSavedFailed);
		}
	};

	this.editMember = function(data){
		var _self = this;
		params  = Json.encode(data);
		var options = {
			url: "/getMembership?user_id=" + data.userId + "&layer_id=" + data.layerId ,
			method:'get',
			params: data,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._editMemberHandler
		};
		Util.Ajax(options);
	};

	this._editMemberHandler = function(response){
		var data = Json.decode(response.responseText);
		if(response.status == 200) {
			var  getMemberSuccess= new Events.MemberEvent(Events.MemberEvent.GET_MEMBER_SUCCESS,data);
			GEvent.dispatchEvent(getMemberSuccess);
		}
		else if (response.status == 404) {
			alert('could not find this member');
		}
	};

	this.updateMember = function(data){
		var _self = this;
		params  = Json.encode(data);
		var options = {
			url: "/memberships/" + data.id + ".json" ,
			method:'put',
			params: params,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._updateMemberHandler
		};
		Util.Ajax(options);
	};

	this._updateMemberHandler = function(response){
		var data = Json.decode(response.responseText);
		if(response.status == 201) {
			var memberGetUpdated = new Events.MemberEvent(Events.MemberEvent.MEMBER_GET_UPDATED,data);
			GEvent.dispatchEvent(memberGetUpdated);
		}
		else if (response.status == 200) {
			var memberGetUpdatedFailed = new Events.MemberEvent(Events.MemberEvent.MEMBER_GET_UPDATED_FAILED,data);
			GEvent.dispatchEvent(memberGetUpdatedFailed);
		}
	};

}
Model.ResourceManager = function(){
	var _self = this;
	this.resources = [];
	this.currentResource = null


	this.getResourceDetailForResourceList = function(id){
		AjaxRequest.get("/resources/" + id, function(response){
			_self._getResourceDetailForResourceList(response);
		})
	};

	this._getResourceDetailForResourceList = function(response){
		var resouceDetailEvent = null;
		if(response.status == 200){
			var resource = Json.decode(response.responseText);
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_DETAIL_FOR_RESOURCE_LIST, resource);
		}
		else{
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_DETAIL_FOR_RESOURCE_LIST_FAILED);
		}
		GEvent.dispatchEvent(resouceDetailEvent);
	};

	this.loadResources = function(){
		AjaxRequest.get("/resources", function(response){
			_self._loadResourcesEventHandler(response);
		});
	};

	this.loadResourcesOf = function(queryString){
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.LOADING_WINDOW_SHOW));
		AjaxRequest.get("/resources?" +queryString, function(response){
			_self._loadResourcesEventHandler(response);
		});
	};

	this._loadResourcesEventHandler = function(response){
		if(response.status == 200){
			_self.resources = Json.decode(response.responseText);
			GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCES_CHANGED));
		}
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.LOADING_WINDOW_CLOSE));
	};

	this.createResource = function(data){
		var param = Json.encode({resource: data});
		var options = {
			url:"/resources",
			method:'post',
			params: param,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._createResourceEventHandler
		};
		Util.Ajax(options);
	};

	this._createResourceEventHandler = function(response){
		var resouceAddedEvent = null;
		if(response.status == 200){
			var resource = Json.decode(response.responseText);
			resouceAddedEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_ADDED, resource);
			_self.resources.push(Json.decode(response.responseText));
		}
		else{
			resouceAddedEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_ADDED, false);
		}
		GEvent.dispatchEvent(resouceAddedEvent);
	};

	this.getResourceDetail = function(id){
		AjaxRequest.get("/resources/" + id, function(response){
			_self._getResourceDetailEventHandler(response);
		})
	};

	this._getResourceDetailEventHandler = function(response){
		var resouceDetailEvent = null;
		if(response.status == 200){
			this.currentResource = Json.decode(response.responseText);
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_DETAIL, this.currentResource);
		}
		else{
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_DETAIL_FAILED);
		}
		GEvent.dispatchEvent(resouceDetailEvent);
	};

	this.loadResourcesPaging = function(data){
		var options = {
			url:"/layers/" + data.layerId + "/resources.json?page=" + data.page ,
			method:'get',
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._loadResourcesPaging
		};
		Util.Ajax(options);

	};

	this._loadResourcesPaging = function(response){
		var resouceDetailEvent = null;
		if(response.status == 200){
			var resources = Json.decode(response.responseText);
			resoucePaginglEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_PAGING, resources);
		}
		else{
			resoucePaginglEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_PAGING_FAILED);
		}
		GEvent.dispatchEvent(resoucePaginglEvent);
	};

	this.getResourceTemplate = function(layerId){
		var options = {
			url:"/layers/" + data.layerId + "/property_templates.json",
			method:'get',
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._getResourceTemplateEventHandler
		};
		Util.Ajax(options);
	};

	this._getResourceTemplateEventHandler = function(response){
		var resouceDetailEvent = null;
		if(response.status == 200){
			var template = Json.decode(response.responseText);
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_TEMPLATE, template);
		}
		else{
			resouceDetailEvent = new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_GET_TEMPLATE_FAILED);
		}
		GEvent.dispatchEvent(resouceDetailEvent);
	};

	this.confirmImport = function(fileName, layerId){
		GEvent.dispatchEvent(new Events.MapsEvent(Events.ResourcesEvent.LOADING_IMPORT_WINDOW_SHOW));
		var options = {
			url:"/import_from_csv",
			params: {fileName: fileName, layerId: layerId},
			method:'post',
			success:_self._confirmImportEventHandler
		};
		Util.Ajax(options);
	};

	this._confirmImportEventHandler = function(response){
		if (response.status == 200){
			var resources = Json.decode(response.responseText);
			for(var i = 0; i < resources.length; i++){
				_self.addResource(resources[i]);
			}
			GEvent.dispatchEvent(new Events.MapsEvent(Events.ResourcesEvent.LOADING_IMPORT_WINDOW_CLOSE));
			GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.IMPORT_RESOURCES_FROM_CSV_SUCCESS));
		}
	};

	this.addResource = function(resource){
		this.resources.push(resource);

		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_ITEM_ADDED, resource));
	};

	this.editResource = function(resourceId){
		AjaxRequest.get("/resources/" +resourceId +"/edit", function(response){
			_self._editResourceHandler(response);
		});
	};

	this._editResourceHandler = function(response){
		if(response.status == 200){
			var resource = Json.decode(response.responseText);
			GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_EDIT_SUCCESS, resource));
		}
	};

	this.updateResource = function(data){
	  window.data = data ;
	  var param = Json.encode({resource: data});
		var options = {
			url:"/resources/" + data.id ,
			method:'put',
			params: param,
			headers:{"Content-Type":"application/json; charset=utf-8"},
			success:_self._updateResourceEventHandler
		};
		Util.Ajax(options);
	};

	this._updateResourceEventHandler = function(response){
		if(response.status == 200){
			var resource = Json.decode(response.responseText);
			_self._updateResourceInCollection(resource);
			GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCES_UPDATE_SUCCESS, resource));
		}
	};

	this._updateResourceInCollection = function(resource){
	  var resources =	_self.resources ;
	  for(var i=0;i<resources.length;i++){
	  	if(resources[i].id == resource.id){
	  		resources[i].name = resource.name;
	  		resources[i].lat = resource.lat;
	  		resources[i].lng = resource.lng;
	  		return true;
	  	}
	  }
	  return false;
	};

};
Model.AuthenticationManager = function(){
	var _self = this;
	this.session = {};

	this.login = function(user){
		AjaxRequest.post('/login_rpc', user, function(response){
			_self._loginEventHandler(response);
		});
	};

	this._loginEventHandler = function(response){
		if(response.status == 200){
			_self.session = Json.decode(response.responseText);
			var loginSuccess = new Events.AuthenticationEvent(Events.AuthenticationEvent.LOGIN_SUCCESS);
			GEvent.dispatchEvent(loginSuccess);
		}
		else{
			var loginFailed = new Events.AuthenticationEvent(Events.AuthenticationEvent.LOGIN_FAILED);
			GEvent.dispatchEvent(loginFailed);
		}
	};

	this.logout = function(){
		AjaxRequest.post('/logout_rpc', 'logout', function(response){
			_self._logoutEventHandler(response);
		});
	},

	this._logoutEventHandler = function(response){
		if(response.status == 200){
			var logoutSuccess = new Events.AuthenticationEvent(Events.AuthenticationEvent.LOGOUT_SUCCESS);
			GEvent.dispatchEvent(logoutSuccess);
		}
	}
}
Model.UploadManager = function(){
	var _self = this;

	this.getSWFUploadObject = function(){
		return window.SETTING.swfUpload;
	};

	this.startUploadIcon = function(swf){
		swf.startUpload(swf.QueueFile.id);
	};

	this.startImportResources = function(swf){
		swf.startUpload(swf.QueueFile.id);
	}
};
Helper.LayerHelper = function(layerManager){
	this.layerManager = layerManager;

	this.getIcon = function(layerId){
		var layer = this.layerManager.findById(layerId);
		return layer && layer.icon? layer.icon : SETTING.MARKER_ICON_DEFAULT;
	};

	this.getLayer = function(layerId){
		return this.layerManager.findById(layerId);
	};
}
Events.LayersEvent = function(type, data){
	this.type = type;
	this.data = data;
}


Events.LayersEvent.LAYERS_CHANGED = 'layersChangedLayersEvent';
Events.LayersEvent.LAYER_ADDED = 'layerAddedLayersEvent';
Events.LayersEvent.LAYER_NEW = 'layerNewLayersEvent';
Events.LayersEvent.LAYERS_LOAD = 'layersLoadLayersEvent';
Events.LayersEvent.MYLAYERS_SHOW = 'layersShowMyLayerEvent';
Events.LayersEvent.MYLAYER_LOAD = 'layersLoadMyLayerEvent';
Events.LayersEvent.MYLAYERS_CHANGED = 'layersChangeMyLayerEvent';
Events.LayersEvent.MYLAYERS_HIDE = 'layersHideMyLayerEvent';
Events.LayersEvent.MYLAYERS_SHOW = 'layersShowMyLayerEvent' ;
Events.LayersEvent.CREATE_MY_LAYER = 'layerCreateMyLayerEvent';
Events.LayersEvent.MY_LAYER_ADDED = 'layerMyLayerAddedEvent';
Events.LayersEvent.MY_LAYER_ADDED_FAILED = 'layerMyLayerAddedFailedEvent';
Events.LayersEvent.UPDATE_MY_LAYER_STATUS = 'layerUpdateMylayerEvent';
Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED = 'layerMyLayerStatusSaveEvent';
Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED_FAILED = "layerMyLayerStatusSavedFailedEvent";
Events.LayersEvent.LAYERS_UPDATE_RESOURCE_LOCATION_DRAGGING = "layerUpdateResourceLocationDraggingEvent";
Events.LayersEvent.LAYERS_LOAD_COMPLETED = "layersLoadCompletedLayerEvent";
Events.LayersEvent.SHOW_FRONT_LAYER_EVENT = "layersShowFrontLayerEvent";
Events.ResourcesEvent = function(type, data){
	this.type = type;
	this.data = data;
}

Events.ResourcesEvent.RESOURCES_CHANGED = 'resourcesChangedResourcesEvent';
Events.ResourcesEvent.RESOURCES_SAVE = 'resourcesSaveResourcesEvent';
Events.ResourcesEvent.RESOURCE_ADDED = "resourcesAddedResourceEvent";
Events.ResourcesEvent.RESOURCE_GET_DETAIL = 'resourceGetDetailEvent';
Events.ResourcesEvent.RESOURCE_GET_DETAIL_FAILED = 'resourceGetDetailFailedEvent';
Events.ResourcesEvent.RESOURCE_REQUEST_GET_DETAIL = 'resourceRequestsGetDetailEvent';
Events.ResourcesEvent.RESOURCE_LOAD = 'resourceLoadResourcesEvent';
Events.ResourcesEvent.RESOURCES_LOAD_PAGING = 'resourcesLoadPagingResourcesEvent';
Events.ResourcesEvent.RESOURCES_LOAD_TEMPLATE = 'resourcesLoadTemplateResourcesEvent';
Events.ResourcesEvent.RESOURCE_GET_TEMPLATE = 'resourcesGetTemplateResourcesEvent';
Events.ResourcesEvent.RESOURCE_GET_PAGING = "resourcesGetPagingResourcesEvent";
Events.ResourcesEvent.RESOURCE_GET_PAGING_FAILED = "resourcesGetPagingFailedResourcesEvent";
Events.ResourcesEvent.RESOURCE_LOAD_DETAIL_FOR_RESOURCE_LIST = "resourceLoadDetailForResourceList";
Events.ResourcesEvent.RESOURCE_GET_DETAIL_FOR_RESOURCE_LIST = "resourceGetDetailForResourceList";
Events.ResourcesEvent.RESOURCE_GET_DETAIL_FOR_RESOURCE_LIST_FAILED = "resourceGetDetailForResourceListFailed";
Events.ResourcesEvent.LOAD_LAYER_RESOURCES = "loadLayerResourcesResourcesEvent";
Events.ResourcesEvent.SHOW_IMPORT_RESOURCES = "showImportResourcesEvent";
Events.ResourcesEvent.LOAD_CONFIRMED_RESOURCES = "loadConfirmedResourcesEvent";
Events.ResourcesEvent.CONFIRMED_IMPORT_RESOURCES = "onfirmedImportResourcesEvent";
Events.ResourcesEvent.IMPORT_RESOURCES_FROM_CSV_SUCCESS = "importResourcesFromCsvSuccess";
Events.ResourcesEvent.RESOURCE_ITEM_ADDED = "resourceItemAdded";
Events.ResourcesEvent.RESOURCE_EDIT = "resourceEditResourcesEvent";
Events.ResourcesEvent.RESOURCE_EDIT_SUCCESS = "resourceEditSuccessResourcesEvent";
Events.ResourcesEvent.RESOURCES_UPDATE = "resourceUpdateEvent";
Events.ResourcesEvent.LOADING_IMPORT_WINDOW_SHOW = "resourceShowLoadingImport";
Events.ResourcesEvent.LOADING_IMPORT_WINDOW_CLOSE = "resourceCloseLoadingImport";
Events.AuthenticationEvent = function(type){
	this.type = type;
}

Events.AuthenticationEvent.USER_LOGIN = 'userLoginAuthenticationEvent';
Events.AuthenticationEvent.LOGIN_SUCCESS = 'loginSuccessAuthenticationEvent';
Events.AuthenticationEvent.LOGIN_FAILED = 'loginFailedAuthenticationEvent';
Events.AuthenticationEvent.USER_LOGOUT = 'userLogoutAuthenticationEvent';
Events.AuthenticationEvent.LOGOUT_SUCCESS = 'logoutSuccessAuthenticationEvent';

/**
 * SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com
 *
 * mmSWFUpload 1.0: Flash upload dialog - http://profandesign.se/swfupload/,  http://www.vinterwebb.se/
 *
 * SWFUpload is (c) 2006-2007 Lars Huring, Olov Nilzén and Mammon Media and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * SWFUpload 2 is (c) 2007-2008 Jake Roberts and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */


/* ******************* */
/* Constructor & Init  */
/* ******************* */
var SWFUpload;

if (SWFUpload == undefined) {
	SWFUpload = function (settings) {
		this.initSWFUpload(settings);
	};
}

SWFUpload.prototype.initSWFUpload = function (settings) {
	try {
		this.customSettings = {};	// A container where developers can place their own settings associated with this instance.
		this.settings = settings;
		this.eventQueue = [];
		this.movieName = "SWFUpload_" + SWFUpload.movieCount++;
		this.movieElement = null;


		SWFUpload.instances[this.movieName] = this;

		this.initSettings();
		this.loadFlash();
		this.displayDebugInfo();
	} catch (ex) {
		delete SWFUpload.instances[this.movieName];
		throw ex;
	}
};

/* *************** */
/* Static Members  */
/* *************** */
SWFUpload.instances = {};
SWFUpload.movieCount = 0;
SWFUpload.version = "2.2.0 2009-03-25";
SWFUpload.QUEUE_ERROR = {
	QUEUE_LIMIT_EXCEEDED	  		: -100,
	FILE_EXCEEDS_SIZE_LIMIT  		: -110,
	ZERO_BYTE_FILE			  		: -120,
	INVALID_FILETYPE		  		: -130
};
SWFUpload.UPLOAD_ERROR = {
	HTTP_ERROR				  		: -200,
	MISSING_UPLOAD_URL	      		: -210,
	IO_ERROR				  		: -220,
	SECURITY_ERROR			  		: -230,
	UPLOAD_LIMIT_EXCEEDED	  		: -240,
	UPLOAD_FAILED			  		: -250,
	SPECIFIED_FILE_ID_NOT_FOUND		: -260,
	FILE_VALIDATION_FAILED	  		: -270,
	FILE_CANCELLED			  		: -280,
	UPLOAD_STOPPED					: -290
};
SWFUpload.FILE_STATUS = {
	QUEUED		 : -1,
	IN_PROGRESS	 : -2,
	ERROR		 : -3,
	COMPLETE	 : -4,
	CANCELLED	 : -5
};
SWFUpload.BUTTON_ACTION = {
	SELECT_FILE  : -100,
	SELECT_FILES : -110,
	START_UPLOAD : -120
};
SWFUpload.CURSOR = {
	ARROW : -1,
	HAND : -2
};
SWFUpload.WINDOW_MODE = {
	WINDOW : "window",
	TRANSPARENT : "transparent",
	OPAQUE : "opaque"
};

SWFUpload.completeURL = function(url) {
	if (typeof(url) !== "string" || url.match(/^https?:\/\//i) || url.match(/^\//)) {
		return url;
	}

	var currentURL = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "");

	var indexSlash = window.location.pathname.lastIndexOf("/");
	if (indexSlash <= 0) {
		path = "/";
	} else {
		path = window.location.pathname.substr(0, indexSlash) + "/";
	}

	return /*currentURL +*/ path + url;

};


/* ******************** */
/* Instance Members  */
/* ******************** */

SWFUpload.prototype.initSettings = function () {
	this.ensureDefault = function (settingName, defaultValue) {
		this.settings[settingName] = (this.settings[settingName] == undefined) ? defaultValue : this.settings[settingName];
	};

	this.ensureDefault("upload_url", "");
	this.ensureDefault("preserve_relative_urls", false);
	this.ensureDefault("file_post_name", "Filedata");
	this.ensureDefault("post_params", {});
	this.ensureDefault("use_query_string", false);
	this.ensureDefault("requeue_on_error", false);
	this.ensureDefault("http_success", []);
	this.ensureDefault("assume_success_timeout", 0);

	this.ensureDefault("file_types", "*.*");
	this.ensureDefault("file_types_description", "All Files");
	this.ensureDefault("file_size_limit", 0);	// Default zero means "unlimited"
	this.ensureDefault("file_upload_limit", 0);
	this.ensureDefault("file_queue_limit", 0);

	this.ensureDefault("flash_url", "swfupload.swf");
	this.ensureDefault("prevent_swf_caching", true);

	this.ensureDefault("button_image_url", "");
	this.ensureDefault("button_width", 1);
	this.ensureDefault("button_height", 1);
	this.ensureDefault("button_text", "");
	this.ensureDefault("button_text_style", "color: #000000; font-size: 16pt;");
	this.ensureDefault("button_text_top_padding", 0);
	this.ensureDefault("button_text_left_padding", 0);
	this.ensureDefault("button_action", SWFUpload.BUTTON_ACTION.SELECT_FILES);
	this.ensureDefault("button_disabled", false);
	this.ensureDefault("button_placeholder_id", "");
	this.ensureDefault("button_placeholder", null);
	this.ensureDefault("button_cursor", SWFUpload.CURSOR.ARROW);
	this.ensureDefault("button_window_mode", SWFUpload.WINDOW_MODE.WINDOW);

	this.ensureDefault("debug", false);
	this.settings.debug_enabled = this.settings.debug;	// Here to maintain v2 API

	this.settings.return_upload_start_handler = this.returnUploadStart;
	this.ensureDefault("swfupload_loaded_handler", null);
	this.ensureDefault("file_dialog_start_handler", null);
	this.ensureDefault("file_queued_handler", null);
	this.ensureDefault("file_queue_error_handler", null);
	this.ensureDefault("file_dialog_complete_handler", null);

	this.ensureDefault("upload_start_handler", null);
	this.ensureDefault("upload_progress_handler", null);
	this.ensureDefault("upload_error_handler", null);
	this.ensureDefault("upload_success_handler", null);
	this.ensureDefault("upload_complete_handler", null);

	this.ensureDefault("debug_handler", this.debugMessage);

	this.ensureDefault("custom_settings", {});

	this.customSettings = this.settings.custom_settings;

	if (!!this.settings.prevent_swf_caching) {
		this.settings.flash_url = this.settings.flash_url + (this.settings.flash_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();
	}

	if (!this.settings.preserve_relative_urls) {
		this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);
		this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
	}

	delete this.ensureDefault;
};

SWFUpload.prototype.loadFlash = function () {
	var targetElement, tempParent;

	if (document.getElementById(this.movieName) !== null) {
		throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
	}

	targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

	if (targetElement == undefined) {
		throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
	}

	tempParent = document.createElement("div");
	tempParent.innerHTML = this.getFlashHTML();	// Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
	targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement);

	if (window[this.movieName] == undefined) {
		window[this.movieName] = this.getMovieElement();
	}

};

SWFUpload.prototype.getFlashHTML = function () {
	return ['<object id="', this.movieName, '" type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.button_width, '" height="', this.settings.button_height, '" class="swfupload">',
				'<param name="wmode" value="', this.settings.button_window_mode, '" />',
				'<param name="movie" value="', this.settings.flash_url, '" />',
				'<param name="quality" value="high" />',
				'<param name="menu" value="false" />',
				'<param name="allowScriptAccess" value="always" />',
				'<param name="flashvars" value="' + this.getFlashVars() + '" />',
				'</object>'].join("");
};

SWFUpload.prototype.getFlashVars = function () {
	var paramString = this.buildParamString();
	var httpSuccessString = this.settings.http_success.join(",");

	return ["movieName=", encodeURIComponent(this.movieName),
			"&amp;uploadURL=", encodeURIComponent(this.settings.upload_url),
			"&amp;useQueryString=", encodeURIComponent(this.settings.use_query_string),
			"&amp;requeueOnError=", encodeURIComponent(this.settings.requeue_on_error),
			"&amp;httpSuccess=", encodeURIComponent(httpSuccessString),
			"&amp;assumeSuccessTimeout=", encodeURIComponent(this.settings.assume_success_timeout),
			"&amp;params=", encodeURIComponent(paramString),
			"&amp;filePostName=", encodeURIComponent(this.settings.file_post_name),
			"&amp;fileTypes=", encodeURIComponent(this.settings.file_types),
			"&amp;fileTypesDescription=", encodeURIComponent(this.settings.file_types_description),
			"&amp;fileSizeLimit=", encodeURIComponent(this.settings.file_size_limit),
			"&amp;fileUploadLimit=", encodeURIComponent(this.settings.file_upload_limit),
			"&amp;fileQueueLimit=", encodeURIComponent(this.settings.file_queue_limit),
			"&amp;debugEnabled=", encodeURIComponent(this.settings.debug_enabled),
			"&amp;buttonImageURL=", encodeURIComponent(this.settings.button_image_url),
			"&amp;buttonWidth=", encodeURIComponent(this.settings.button_width),
			"&amp;buttonHeight=", encodeURIComponent(this.settings.button_height),
			"&amp;buttonText=", encodeURIComponent(this.settings.button_text),
			"&amp;buttonTextTopPadding=", encodeURIComponent(this.settings.button_text_top_padding),
			"&amp;buttonTextLeftPadding=", encodeURIComponent(this.settings.button_text_left_padding),
			"&amp;buttonTextStyle=", encodeURIComponent(this.settings.button_text_style),
			"&amp;buttonAction=", encodeURIComponent(this.settings.button_action),
			"&amp;buttonDisabled=", encodeURIComponent(this.settings.button_disabled),
			"&amp;buttonCursor=", encodeURIComponent(this.settings.button_cursor)
		].join("");
};

SWFUpload.prototype.getMovieElement = function () {
	if (this.movieElement == undefined) {
		this.movieElement = document.getElementById(this.movieName);
	}

	if (this.movieElement === null) {
		throw "Could not find Flash element";
	}

	return this.movieElement;
};

SWFUpload.prototype.buildParamString = function () {
	var postParams = this.settings.post_params;
	var paramStringPairs = [];

	if (typeof(postParams) === "object") {
		for (var name in postParams) {
			if (postParams.hasOwnProperty(name)) {
				paramStringPairs.push(encodeURIComponent(name.toString()) + "=" + encodeURIComponent(postParams[name].toString()));
			}
		}
	}

	return paramStringPairs.join("&amp;");
};

SWFUpload.prototype.destroy = function () {
	try {
		this.cancelUpload(null, false);


		var movieElement = null;
		movieElement = this.getMovieElement();

		if (movieElement && typeof(movieElement.CallFunction) === "unknown") { // We only want to do this in IE
			for (var i in movieElement) {
				try {
					if (typeof(movieElement[i]) === "function") {
						movieElement[i] = null;
					}
				} catch (ex1) {}
			}

			try {
				movieElement.parentNode.removeChild(movieElement);
			} catch (ex) {}
		}

		window[this.movieName] = null;

		SWFUpload.instances[this.movieName] = null;
		delete SWFUpload.instances[this.movieName];

		this.movieElement = null;
		this.settings = null;
		this.customSettings = null;
		this.eventQueue = null;
		this.movieName = null;


		return true;
	} catch (ex2) {
		return false;
	}
};


SWFUpload.prototype.displayDebugInfo = function () {
	this.debug(
		[
			"---SWFUpload Instance Info---\n",
			"Version: ", SWFUpload.version, "\n",
			"Movie Name: ", this.movieName, "\n",
			"Settings:\n",
			"\t", "upload_url:               ", this.settings.upload_url, "\n",
			"\t", "flash_url:                ", this.settings.flash_url, "\n",
			"\t", "use_query_string:         ", this.settings.use_query_string.toString(), "\n",
			"\t", "requeue_on_error:         ", this.settings.requeue_on_error.toString(), "\n",
			"\t", "http_success:             ", this.settings.http_success.join(", "), "\n",
			"\t", "assume_success_timeout:   ", this.settings.assume_success_timeout, "\n",
			"\t", "file_post_name:           ", this.settings.file_post_name, "\n",
			"\t", "post_params:              ", this.settings.post_params.toString(), "\n",
			"\t", "file_types:               ", this.settings.file_types, "\n",
			"\t", "file_types_description:   ", this.settings.file_types_description, "\n",
			"\t", "file_size_limit:          ", this.settings.file_size_limit, "\n",
			"\t", "file_upload_limit:        ", this.settings.file_upload_limit, "\n",
			"\t", "file_queue_limit:         ", this.settings.file_queue_limit, "\n",
			"\t", "debug:                    ", this.settings.debug.toString(), "\n",

			"\t", "prevent_swf_caching:      ", this.settings.prevent_swf_caching.toString(), "\n",

			"\t", "button_placeholder_id:    ", this.settings.button_placeholder_id.toString(), "\n",
			"\t", "button_placeholder:       ", (this.settings.button_placeholder ? "Set" : "Not Set"), "\n",
			"\t", "button_image_url:         ", this.settings.button_image_url.toString(), "\n",
			"\t", "button_width:             ", this.settings.button_width.toString(), "\n",
			"\t", "button_height:            ", this.settings.button_height.toString(), "\n",
			"\t", "button_text:              ", this.settings.button_text.toString(), "\n",
			"\t", "button_text_style:        ", this.settings.button_text_style.toString(), "\n",
			"\t", "button_text_top_padding:  ", this.settings.button_text_top_padding.toString(), "\n",
			"\t", "button_text_left_padding: ", this.settings.button_text_left_padding.toString(), "\n",
			"\t", "button_action:            ", this.settings.button_action.toString(), "\n",
			"\t", "button_disabled:          ", this.settings.button_disabled.toString(), "\n",

			"\t", "custom_settings:          ", this.settings.custom_settings.toString(), "\n",
			"Event Handlers:\n",
			"\t", "swfupload_loaded_handler assigned:  ", (typeof this.settings.swfupload_loaded_handler === "function").toString(), "\n",
			"\t", "file_dialog_start_handler assigned: ", (typeof this.settings.file_dialog_start_handler === "function").toString(), "\n",
			"\t", "file_queued_handler assigned:       ", (typeof this.settings.file_queued_handler === "function").toString(), "\n",
			"\t", "file_queue_error_handler assigned:  ", (typeof this.settings.file_queue_error_handler === "function").toString(), "\n",
			"\t", "upload_start_handler assigned:      ", (typeof this.settings.upload_start_handler === "function").toString(), "\n",
			"\t", "upload_progress_handler assigned:   ", (typeof this.settings.upload_progress_handler === "function").toString(), "\n",
			"\t", "upload_error_handler assigned:      ", (typeof this.settings.upload_error_handler === "function").toString(), "\n",
			"\t", "upload_success_handler assigned:    ", (typeof this.settings.upload_success_handler === "function").toString(), "\n",
			"\t", "upload_complete_handler assigned:   ", (typeof this.settings.upload_complete_handler === "function").toString(), "\n",
			"\t", "debug_handler assigned:             ", (typeof this.settings.debug_handler === "function").toString(), "\n"
		].join("")
	);
};

/* Note: addSetting and getSetting are no longer used by SWFUpload but are included
	the maintain v2 API compatibility
*/
SWFUpload.prototype.addSetting = function (name, value, default_value) {
    if (value == undefined) {
        return (this.settings[name] = default_value);
    } else {
        return (this.settings[name] = value);
	}
};

SWFUpload.prototype.getSetting = function (name) {
    if (this.settings[name] != undefined) {
        return this.settings[name];
	}

    return "";
};



SWFUpload.prototype.callFlash = function (functionName, argumentArray) {
	argumentArray = argumentArray || [];

	var movieElement = this.getMovieElement();
	var returnValue, returnString;

	try {
		returnString = movieElement.CallFunction('<invoke name="' + functionName + '" returntype="javascript">' + __flash__argumentsToXML(argumentArray, 0) + '</invoke>');
		returnValue = eval(returnString);
	} catch (ex) {
		throw "Call to " + functionName + " failed";
	}

	if (returnValue != undefined && typeof returnValue.post === "object") {
		returnValue = this.unescapeFilePostParams(returnValue);
	}

	return returnValue;
};

/* *****************************
	-- Flash control methods --
	Your UI should use these
	to operate SWFUpload
   ***************************** */

SWFUpload.prototype.selectFile = function () {
	this.callFlash("SelectFile");
};

SWFUpload.prototype.selectFiles = function () {
	this.callFlash("SelectFiles");
};


SWFUpload.prototype.startUpload = function (fileID) {
	this.callFlash("StartUpload", [fileID]);
};

SWFUpload.prototype.cancelUpload = function (fileID, triggerErrorEvent) {
	if (triggerErrorEvent !== false) {
		triggerErrorEvent = true;
	}
	this.callFlash("CancelUpload", [fileID, triggerErrorEvent]);
};

SWFUpload.prototype.stopUpload = function () {
	this.callFlash("StopUpload");
};

/* ************************
 * Settings methods
 *   These methods change the SWFUpload settings.
 *   SWFUpload settings should not be changed directly on the settings object
 *   since many of the settings need to be passed to Flash in order to take
 *   effect.
 * *********************** */

SWFUpload.prototype.getStats = function () {
	return this.callFlash("GetStats");
};

SWFUpload.prototype.setStats = function (statsObject) {
	this.callFlash("SetStats", [statsObject]);
};

SWFUpload.prototype.getFile = function (fileID) {
	if (typeof(fileID) === "number") {
		return this.callFlash("GetFileByIndex", [fileID]);
	} else {
		return this.callFlash("GetFile", [fileID]);
	}
};

SWFUpload.prototype.addFileParam = function (fileID, name, value) {
	return this.callFlash("AddFileParam", [fileID, name, value]);
};

SWFUpload.prototype.removeFileParam = function (fileID, name) {
	this.callFlash("RemoveFileParam", [fileID, name]);
};

SWFUpload.prototype.setUploadURL = function (url) {
	this.settings.upload_url = url.toString();
	this.callFlash("SetUploadURL", [url]);
};

SWFUpload.prototype.setPostParams = function (paramsObject) {
	this.settings.post_params = paramsObject;
	this.callFlash("SetPostParams", [paramsObject]);
};

SWFUpload.prototype.addPostParam = function (name, value) {
	this.settings.post_params[name] = value;
	this.callFlash("SetPostParams", [this.settings.post_params]);
};

SWFUpload.prototype.removePostParam = function (name) {
	delete this.settings.post_params[name];
	this.callFlash("SetPostParams", [this.settings.post_params]);
};

SWFUpload.prototype.setFileTypes = function (types, description) {
	this.settings.file_types = types;
	this.settings.file_types_description = description;
	this.callFlash("SetFileTypes", [types, description]);
};

SWFUpload.prototype.setFileSizeLimit = function (fileSizeLimit) {
	this.settings.file_size_limit = fileSizeLimit;
	this.callFlash("SetFileSizeLimit", [fileSizeLimit]);
};

SWFUpload.prototype.setFileUploadLimit = function (fileUploadLimit) {
	this.settings.file_upload_limit = fileUploadLimit;
	this.callFlash("SetFileUploadLimit", [fileUploadLimit]);
};

SWFUpload.prototype.setFileQueueLimit = function (fileQueueLimit) {
	this.settings.file_queue_limit = fileQueueLimit;
	this.callFlash("SetFileQueueLimit", [fileQueueLimit]);
};

SWFUpload.prototype.setFilePostName = function (filePostName) {
	this.settings.file_post_name = filePostName;
	this.callFlash("SetFilePostName", [filePostName]);
};

SWFUpload.prototype.setUseQueryString = function (useQueryString) {
	this.settings.use_query_string = useQueryString;
	this.callFlash("SetUseQueryString", [useQueryString]);
};

SWFUpload.prototype.setRequeueOnError = function (requeueOnError) {
	this.settings.requeue_on_error = requeueOnError;
	this.callFlash("SetRequeueOnError", [requeueOnError]);
};

SWFUpload.prototype.setHTTPSuccess = function (http_status_codes) {
	if (typeof http_status_codes === "string") {
		http_status_codes = http_status_codes.replace(" ", "").split(",");
	}

	this.settings.http_success = http_status_codes;
	this.callFlash("SetHTTPSuccess", [http_status_codes]);
};

SWFUpload.prototype.setAssumeSuccessTimeout = function (timeout_seconds) {
	this.settings.assume_success_timeout = timeout_seconds;
	this.callFlash("SetAssumeSuccessTimeout", [timeout_seconds]);
};

SWFUpload.prototype.setDebugEnabled = function (debugEnabled) {
	this.settings.debug_enabled = debugEnabled;
	this.callFlash("SetDebugEnabled", [debugEnabled]);
};

SWFUpload.prototype.setButtonImageURL = function (buttonImageURL) {
	if (buttonImageURL == undefined) {
		buttonImageURL = "";
	}

	this.settings.button_image_url = buttonImageURL;
	this.callFlash("SetButtonImageURL", [buttonImageURL]);
};

SWFUpload.prototype.setButtonDimensions = function (width, height) {
	this.settings.button_width = width;
	this.settings.button_height = height;

	var movie = this.getMovieElement();
	if (movie != undefined) {
		movie.style.width = width + "px";
		movie.style.height = height + "px";
	}

	this.callFlash("SetButtonDimensions", [width, height]);
};
SWFUpload.prototype.setButtonText = function (html) {
	this.settings.button_text = html;
	this.callFlash("SetButtonText", [html]);
};
SWFUpload.prototype.setButtonTextPadding = function (left, top) {
	this.settings.button_text_top_padding = top;
	this.settings.button_text_left_padding = left;
	this.callFlash("SetButtonTextPadding", [left, top]);
};

SWFUpload.prototype.setButtonTextStyle = function (css) {
	this.settings.button_text_style = css;
	this.callFlash("SetButtonTextStyle", [css]);
};
SWFUpload.prototype.setButtonDisabled = function (isDisabled) {
	this.settings.button_disabled = isDisabled;
	this.callFlash("SetButtonDisabled", [isDisabled]);
};
SWFUpload.prototype.setButtonAction = function (buttonAction) {
	this.settings.button_action = buttonAction;
	this.callFlash("SetButtonAction", [buttonAction]);
};

SWFUpload.prototype.setButtonCursor = function (cursor) {
	this.settings.button_cursor = cursor;
	this.callFlash("SetButtonCursor", [cursor]);
};

/* *******************************
	Flash Event Interfaces
	These functions are used by Flash to trigger the various
	events.

	All these functions a Private.

	Because the ExternalInterface library is buggy the event calls
	are added to a queue and the queue then executed by a setTimeout.
	This ensures that events are executed in a determinate order and that
	the ExternalInterface bugs are avoided.
******************************* */

SWFUpload.prototype.queueEvent = function (handlerName, argumentArray) {

	if (argumentArray == undefined) {
		argumentArray = [];
	} else if (!(argumentArray instanceof Array)) {
		argumentArray = [argumentArray];
	}

	var self = this;
	if (typeof this.settings[handlerName] === "function") {
		this.eventQueue.push(function () {
			this.settings[handlerName].apply(this, argumentArray);
		});

		setTimeout(function () {
			self.executeNextEvent();
		}, 0);

	} else if (this.settings[handlerName] !== null) {
		throw "Event handler " + handlerName + " is unknown or is not a function";
	}
};

SWFUpload.prototype.executeNextEvent = function () {

	var  f = this.eventQueue ? this.eventQueue.shift() : null;
	if (typeof(f) === "function") {
		f.apply(this);
	}
};

SWFUpload.prototype.unescapeFilePostParams = function (file) {
	var reg = /[$]([0-9a-f]{4})/i;
	var unescapedPost = {};
	var uk;

	if (file != undefined) {
		for (var k in file.post) {
			if (file.post.hasOwnProperty(k)) {
				uk = k;
				var match;
				while ((match = reg.exec(uk)) !== null) {
					uk = uk.replace(match[0], String.fromCharCode(parseInt("0x" + match[1], 16)));
				}
				unescapedPost[uk] = file.post[k];
			}
		}

		file.post = unescapedPost;
	}

	return file;
};

SWFUpload.prototype.testExternalInterface = function () {
	try {
		return this.callFlash("TestExternalInterface");
	} catch (ex) {
		return false;
	}
};

SWFUpload.prototype.flashReady = function () {
	var movieElement = this.getMovieElement();

	if (!movieElement) {
		this.debug("Flash called back ready but the flash movie can't be found.");
		return;
	}

	this.cleanUp(movieElement);

	this.queueEvent("swfupload_loaded_handler");
};

SWFUpload.prototype.cleanUp = function (movieElement) {
	try {
		if (this.movieElement && typeof(movieElement.CallFunction) === "unknown") { // We only want to do this in IE
			this.debug("Removing Flash functions hooks (this should only run in IE and should prevent memory leaks)");
			for (var key in movieElement) {
				try {
					if (typeof(movieElement[key]) === "function") {
						movieElement[key] = null;
					}
				} catch (ex) {
				}
			}
		}
	} catch (ex1) {

	}

	window["__flash__removeCallback"] = function (instance, name) {
		try {
			if (instance) {
				instance[name] = null;
			}
		} catch (flashEx) {

		}
	};

};


/* This is a chance to do something before the browse window opens */
SWFUpload.prototype.fileDialogStart = function () {
	this.queueEvent("file_dialog_start_handler");
};


/* Called when a file is successfully added to the queue. */
SWFUpload.prototype.fileQueued = function (file) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("file_queued_handler", file);
};


/* Handle errors that occur when an attempt to queue a file fails. */
SWFUpload.prototype.fileQueueError = function (file, errorCode, message) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("file_queue_error_handler", [file, errorCode, message]);
};

/* Called after the file dialog has closed and the selected files have been queued.
	You could call startUpload here if you want the queued files to begin uploading immediately. */
SWFUpload.prototype.fileDialogComplete = function (numFilesSelected, numFilesQueued, numFilesInQueue) {
	this.queueEvent("file_dialog_complete_handler", [numFilesSelected, numFilesQueued, numFilesInQueue]);
};

SWFUpload.prototype.uploadStart = function (file) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("return_upload_start_handler", file);
};

SWFUpload.prototype.returnUploadStart = function (file) {
	var returnValue;
	if (typeof this.settings.upload_start_handler === "function") {
		file = this.unescapeFilePostParams(file);
		returnValue = this.settings.upload_start_handler.call(this, file);
	} else if (this.settings.upload_start_handler != undefined) {
		throw "upload_start_handler must be a function";
	}

	if (returnValue === undefined) {
		returnValue = true;
	}

	returnValue = !!returnValue;

	this.callFlash("ReturnUploadStart", [returnValue]);
};



SWFUpload.prototype.uploadProgress = function (file, bytesComplete, bytesTotal) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("upload_progress_handler", [file, bytesComplete, bytesTotal]);
};

SWFUpload.prototype.uploadError = function (file, errorCode, message) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("upload_error_handler", [file, errorCode, message]);
};

SWFUpload.prototype.uploadSuccess = function (file, serverData, responseReceived) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("upload_success_handler", [file, serverData, responseReceived]);
};

SWFUpload.prototype.uploadComplete = function (file) {
	file = this.unescapeFilePostParams(file);
	this.queueEvent("upload_complete_handler", file);
};

/* Called by SWFUpload JavaScript and Flash functions when debug is enabled. By default it writes messages to the
   internal debug console.  You can override this event and have messages written where you want. */
SWFUpload.prototype.debug = function (message) {
	this.queueEvent("debug_handler", message);
};


/* **********************************
	Debug Console
	The debug console is a self contained, in page location
	for debug message to be sent.  The Debug Console adds
	itself to the body if necessary.

	The console is automatically scrolled as messages appear.

	If you are using your own debug handler or when you deploy to production and
	have debug disabled you can remove these functions to reduce the file size
	and complexity.
********************************** */

SWFUpload.prototype.debugMessage = function (message) {
	if (this.settings.debug) {
		var exceptionMessage, exceptionValues = [];

		if (typeof message === "object" && typeof message.name === "string" && typeof message.message === "string") {
			for (var key in message) {
				if (message.hasOwnProperty(key)) {
					exceptionValues.push(key + ": " + message[key]);
				}
			}
			exceptionMessage = exceptionValues.join("\n") || "";
			exceptionValues = exceptionMessage.split("\n");
			exceptionMessage = "EXCEPTION: " + exceptionValues.join("\nEXCEPTION: ");
			SWFUpload.Console.writeLine(exceptionMessage);
		} else {
			SWFUpload.Console.writeLine(message);
		}
	}
};

SWFUpload.Console = {};
SWFUpload.Console.writeLine = function (message) {
	var console, documentForm;

	try {
		console = document.getElementById("SWFUpload_Console");

		if (!console) {
			documentForm = document.createElement("form");
			document.getElementsByTagName("body")[0].appendChild(documentForm);

			console = document.createElement("textarea");
			console.id = "SWFUpload_Console";
			console.style.fontFamily = "monospace";
			console.setAttribute("wrap", "off");
			console.wrap = "off";
			console.style.overflow = "auto";
			console.style.width = "700px";
			console.style.height = "350px";
			console.style.margin = "5px";
			documentForm.appendChild(console);
		}

		console.value += message + "\n";

		console.scrollTop = console.scrollHeight - console.clientHeight;
	} catch (ex) {
		alert("Exception: " + ex.name + " Message: " + ex.message);
	}
};
Model.TemplateManager = function(){
	this.templates = [];
	var _self = this;

	this.loadTemplates = function(layerId){
		var url = "/layers/" + layerId + "/property_templates"
		AjaxRequest.get(url, function(response){
			_self._getTemplatesEventHandler(response);
		})
	};

	this._getTemplatesEventHandler = function(response){
		if(response.status == 200){
			var templatesChanged = new Events.TemplatesEvent(Events.TemplatesEvent.TEMPLATES_CHANGED);
			_self.templates = Json.decode(response.responseText);
			GEvent.dispatchEvent(templatesChanged);
		}
	};

}
Events.TemplatesEvent = function(type,data){
	this.type = type;
	this.data = data;
}


Events.TemplatesEvent.TEMPLATES_CHANGED = 'templatesChangedTemplatesEvent';
Events.TemplatesEvent.TEMPLATES_LOAD = 'templatesLoadTemplatesEvent';

View.HomeView = function(){
	this.element = null;
	this.presenter = new Presenter.HomePresenter(this);

};

View.HomeView.prototype = {


	createElement: function(){
		var _self = this;
		this.element = new Ext.Viewport({
			layout: 'border',
			items: [
				{
					region: 'north',
					id: 'header',
					border: true,
					autoHeight: true,
					items: [
						{
							html: _self.applicationTitle(),
							id: "header_title",
							border: false
						},
						_self.presenter.getLoginView()
					]
				},
				_self.presenter.getViewElement()
			],
			listeners: {
				afterRender: function(elm){ _self._onload(elm) }
			}
		});
	},

	_onload: function(elm){
		this.presenter.getLayerWindowView();
		this.presenter.children.layerWindowPresenter.showLayerWindow();
	},

	getElement: function(){
		return this.element;
	},

	createMapView: function(){
		return new View.MapView();
	},

	createLoginView: function(){
		return new View.LoginView();
	},

	createLayerWindowView: function(){
		return new View.LayerWindowView();
	},

	redraw: function(){
		this.presenter.redrawChildren();
	},

	createMyLayerView: function(){
		return new View.MyLayerView();
	},

	applicationTitle: function(){
		return "<a href='javascript:void(0)' onclick=\"window.open('http://resourcemap.instedd.org/');return false;\" target='_blank'>Dynamic Resource Map</a>";
	},

	createImportResourceView: function(){
		return new View.ImportResourcesView();
	},

	createConfirmDataResourcesView: function(){
		return new View.ConfirmDataResourcesView();
	},

	createFrontLayerView: function(){
		return new View.FrontLayerView();
	},

	createFrontMemberView: function(){
		return new View.FrontMemberView();
	}

}
Presenter.HomePresenter = function(view){
	this.view = view;
	this.children = {};
}

Presenter.HomePresenter.prototype = {


	initialize: function(){
		this.view.createElement();
	},

	getCookieUser: function(){
		return Ext.util.Cookies.get("user");
	},

	getMapPresenter: function(){
		return this.children.mapPresenter;
	},

	getViewElement:function(){
		if(!this.children.mapPresenter){
			this.children.mapPresenter = this.view.createMapView().presenter;
		}
		return this.children.mapPresenter.getElement();
	},

	getLoginView: function(){
		if(!this.children.loginPresenter){
			this.children.loginPresenter = this.view.createLoginView().presenter;
		}

		return this.children.loginPresenter.getElement();
	},

	loginSuccess: function(){
		this.view.redraw();
	},

	loginFailed: function(){
		this.children.loginPresenter.loginFailed();
	},

	redrawChildren: function(){
		this.children.loginPresenter.redraw();
		this.children.layerWindowPresenter.redraw();
		this.children.loginPresenter.showMap();
	},

	getLayerWindowView: function(){
		if(!this.children.layerWindowPresenter){
			this.children.layerWindowPresenter = this.view.createLayerWindowView().presenter;
		}
	},

	getMyLayerPresenter: function(){
		if(!this.children.myLayerPresenter){
			this.children.myLayerPresenter = this.view.createMyLayerView().presenter;
		}
		return this.children.myLayerPresenter;
	},

	hideAll: function(){
		try{
			this.children.myLayerPresenter.hideView();
			this.children.mapPresenter.hideView();
		}
		catch(ex){
		}
	},

	logoutSuccess: function(){
		this.view.redraw();
	},

	getImportResourcePresenter: function(){
		if(!this.children.importResourcesPresenter){
			this.children.importResourcesPresenter = this.view.createImportResourceView().presenter;
		}
		return this.children.importResourcesPresenter;
	},

	getConfirmDataResourcesPresenter: function(){
		if(!this.children.confirmDataResourcesPresenter){
			this.children.confirmDataResourcesPresenter = this.view.createConfirmDataResourcesView().presenter;
		}
		return this.children.confirmDataResourcesPresenter;
	},

	getFrontLayerPresenter: function(){
		if(!this.children.frontLayerPresenter){
			this.children.frontLayerPresenter = this.view.createFrontLayerView().presenter;
		}
		return this.children.frontLayerPresenter;
	},

	getFrontMemberPresenter: function(){
		if(!this.children.frontMemberPresenter){
			this.children.frontMemberPresenter = this.view.createFrontMemberView().presenter;
		}
		return this.children.frontMemberPresenter;
	}

}
View.MapView = function(){
	this.element = null;
	this.presenter = new Presenter.MapPresenter(this, new GoogleMapApi());
	this.presenter.initialize();
};

View.MapView.prototype = {
	createElement: function(){
		var _self = this;
		this.element = new Ext.Container({
			region: 'center',
			id : "region_center",
			listeners: {
				render: function(elm){
					_self.presenter.initializeMap(elm.el.dom);
				}
			}
		});
	},

	getElement: function(){
		return this.element;
	},

	setMarkerPosition: function(marker, lat, lng) {
		this.presenter.setMarkerPosition(marker, lat, lng);
	},

	addMarker: function(marker){
		this.presenter.createMarker(marker);
	},

	hide: function(){
		Ext.getCmp("region_center").hide();
	},

	show: function(){
		Ext.getCmp("region_center").show();
	},

	processMarkerItemVisibility: function(marker,visible){
		this.presenter.setMarkerVisibility(marker,visible);
	},

	generateMarkerItem:function(resource){
		this.presenter.generateMarkerItem(resource);
	},

	showLoadingWindow: function(){
		this.myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading ..."});
		this.myMask.show();
	},

	closeLoadingWindow: function(){
		this.myMask.hide();
	}
}
Presenter.MapPresenter = function(view, map_api){
	this.view = view;
	this.map_api = map_api;
};

Presenter.MapPresenter.prototype = {

	initialize: function(){
		this.view.createElement();
	},

	getElement: function(){
		return this.view.getElement();
	},

	initializeMap: function(canvas){
		this.map_api.initializeMap(canvas);
	},

	getIconFullPath: function(resource){
		var icon = Helper.layerHelper.getIcon(resource.layer_id);

		return SETTING.MARKER_ICON_PATH + icon;
	},

	populate: function(resources){
		this.map_api.clearAllMarkers();
		var _self = this;
		for(var i = 0; i < resources.length; i++){
			this.view.generateMarkerItem(resources[i]);
		}
		this.fitBounds();
	},

	fitBounds: function(){
		this.map_api.fitBounds();
	},

	generateMarkerItem: function(resource){
		var _self = this;
		var marker = this.createMarker({
			lat: resource.lat,
			lng: resource.lng,
			icon: _self.getIconFullPath(resource),
			layer_id: resource.layer_id,
			id: resource.id
		});
		this.addMarkerClickListener(marker, resource.id, this._handleMarkerClickEvent);
	},

	setLayerMarkersVisibility: function(marker,layer_id){
		var checked = Util.func.getLayerChecked(layer_id);
		this.setMarkerVisibility(marker,checked);
	},

	createDraggableMarker: function(marker) {
		var icon = SETTING.MARKER_ICON_PATH + SETTING.MARKER_ICON_DRAGGABLE;
		this.draggableMarker = this.map_api.createDraggableMarker(marker.title, marker.lat, marker.lng,icon);
		return this.draggableMarker;
	},


	setDraggableMarker: function(draggable) {
		this.draggableMarker.setDraggable(draggable);
	},

	addListener: function(object, eventName, handler) {
		this.map_api.addListener(object, eventName, handler);
	},

	showDraggableMarker: function(strLatLng) {
		var _self = this;
		var	defaultLat = null;
		var defaultLng = null;
		if(strLatLng){
			latlng = strLatLng.split(",");
			if(latlng.length>1){
				defaultLat = latlng[0];
				defaultLng= latlng[1];
			}
		}
		if(!defaultLat && !defaultLng){
			var defaultLatLng = this.map_api.getCenter();
			defaultLat = defaultLatLng.lat(); //SETTING.MARKER_DEFAULT_LAT ;
			defaultLng = defaultLatLng.lng();//SETTING.MARKER_DEFAULT_LNG ;
		}

		if (!this.draggableMarker) {

			this.draggableMarker = this.createDraggableMarker({
				title: "New Resource",
				lat: defaultLat,
				lng: defaultLng
			});

			this.addListener(this.draggableMarker, 'dragstart', function(mouseEvent){

			});

			this.addListener(this.draggableMarker, 'dragend', function(mouseEvent){
				var layerId = Util.Cookies.get("selected_layer");
				_self.updateMarkerLocation(mouseEvent.latLng.lat(),mouseEvent.latLng.lng());
			});
		}
		this.draggableMarker.setDraggable(true);
		this.setMarkerVisibility(this.draggableMarker,true);
		this.updateMarkerLocation(defaultLat,defaultLng);
	},

	updateMarkerLocation: function(lat,lng){
		var latLng = {lat:lat,lng:lng};
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYERS_UPDATE_RESOURCE_LOCATION_DRAGGING,latLng ));
	},
	removeDraggableMarker: function() {
		if(this.draggableMarker){
			this.setMarkerVisibility(this.draggableMarker, false);
			this.draggableMarker.setMap(null);
			this.draggableMarker = null;
		}
	},

	resetDraggleMarkerPosition: function(){
		this.map_api.setMarkerPosition(this.draggableMarker,12.531833844565536,103.86724853515625 );
	},

	setDraggableMarkerVisibility: function(visible){
		if(this.draggableMarker)
			this.draggableMarker.setVisible(visible);
	},

	setMarkerDraggability: function(draggable) {
		this.map_api.setMarkerDraggability(this.draggableMarker,draggable);
	},

	updateResourceMarker: function(resource,layers){
		resource.icon = this.getIconFullPath(resource);
		var marker = this.createMarker(resource);
		this.addMarkerClickListener(marker, resource.id, this._handleMarkerClickEvent);
		this.removeDraggableMarker();
	},

	createMarker: function(options){
		return this.map_api.createMarker(options);
	},

	embedData:function(marker,key,value){
		this.map_api.attachDataToMarker(marker,key,value);
	},

	addMarkerClickListener: function(marker,data,handler){
		this.map_api.addMarkerClickListener(marker, data, handler);
	},

	setMarkerPosition: function(marker, lat, lng){
		this.map_api.setMarkerPosition(marker, this.map_api.newLatLng(lat, lng));
	},

	_handleMarkerClickEvent: function(id){
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_REQUEST_GET_DETAIL, id));
	},

	hideView :function(){
		this.view.hide();
	},

	showView : function(){
		this.view.show();
	},

	setMarkerStatus: function(){
		this.processMarkersVisibility();
	},

	processMarkersVisibility: function(){
		this.map_api.processMarkerVisibility();
	},

	setMarkerVisibility:function(marker,visible){
		marker.setVisible(visible);
	},

	getAllMarkers: function(){
		return this.map_api.getAllMarkers();
	},

	moveToPoint: function(currentResource){
		var latLng = this.map_api.newLatLng(currentResource.lat,currentResource.lng);
		this.map_api.setCenter(latLng);
		this.map_api.setZoom(15);
	},

	updateResouceMarker: function(resource,redraw){
		this.map_api.updateMarkerClusterer(resource,redraw);
	},

	setDraggableMarkerPosition: function(latLong){
		if(this.draggableMarker)
		{
			var latlng = this.map_api.newLatLng(latLong.lat, latLong.lng);
			this.map_api.setMarkerPosition(this.draggableMarker,latlng);
			this.map_api.setCenter(latlng);
		}
	},

	showLoadingWindow: function(){
		this.view.showLoadingWindow();
	},

	closeLoadingWindow: function(){
		this.view.closeLoadingWindow();
	}
}
View.LoginView = function(){
	this.element = null;
	this.presenter = new Presenter.LoginPresenter(this);
	this.presenter.initialize();
}

View.LoginView.prototype = {


	createElement: function(){
		this.element = new Ext.Panel({id:'frmHeaderRight' ,width:400});
		this.draw();
	},

	getElement: function(){
		return this.element;
	},

	draw: function(){
		if(Authentication.verify()){
			this._drawWelcome();
		}else{
			this._drawForm();
		}
		this.element.doLayout();
	},

	redraw: function(){
		this.element.removeAll(true);
		this.draw();
	},

	getUserName: function(){
		return this.getElement().findById('username').getValue();
	},

	getUsernameBlankText: function(){
		return Ext.getCmp('username').blankText;
	},

	getPassword: function(){
		return this.getElement().findById('secret').getValue();
	},

	getPasswordBlankText: function(){
		return Ext.getCmp('secret').blankText;
	},

	getFormData: function(){
		return this.getElement().get(0).getForm().getValues();
	},

	showWaiting: function(){
		Ext.fly("login_error_msg").update("Waiting for server response").replaceClass('login_error', "login_request").show();
	},

	showInvalidMessage: function(){
		var errorMsg = this.getElement().findById('login_error_msg').getEl();
		errorMsg.update('Invalid Login');
		errorMsg.replaceClass("login_request", 'login_error');
		errorMsg.show();
	},

	_drawWelcome: function(){
		var _self = this;
		var newPanel = new Ext.Panel({
			padding: 15,
			id: 'panelWelcome',
			cls: 'welcome',
			items:[
				{
					html: _self.presenter.drawUserProfile(),
					listeners:{
						afterRender: function(){
							try{
									Ext.get("resources_map").on('click', function(){
										_self.presenter.showMap();
									});
									Ext.get("my_layers").on('click', function(){
										_self.presenter.showMyLayer();
									});
									Ext.get("user_logout").on("click", function(){
										_self.presenter.logout();
									});
							 }
							catch(ex){alert("Could not bind child event ")}
						}
					}
				}
			]
		});
		this.element.add(newPanel);
	},

	_drawAdminProfile: function(){
		var str ="Welcome " + "<b>" + Authentication.getCurrentUser() + "</b>" +
				 " | <a href='javascript:void(0);' id='resources_map'> Map </a> " +
				 " | <a href='javascript:void(0);' id='my_layers'> My layers </a> " +
				 " | <a href='javascript:void(0);' id='user_logout' > Logout </a> ";
		return str;
	},

	_drawUserWelcome: function(){
		var str ="Welcome " + "<b>" + Authentication.getCurrentUser() + "</b>" +
				 "<a href='javascript:void(0);' id='resources_map'></a> " +
				 "<a href='javascript:void(0);' id='my_layers'></a> " +
				 " | <a href='javascript:void(0);' id='user_logout' > Logout </a> ";
		return str;
	},

	passwordBlur: function(){
		var idComp = "secret";
		var elm = Ext.get(idComp);
		var waterMarkText = Ext.getCmp(idComp).initialConfig.blankText;
		if (elm.dom.value == '') {
			elm.dom.value = waterMarkText;
			elm.dom.type = 'text';
		}
		if (elm.dom.value == waterMarkText) {
			elm.addClass('waterMark');
			elm.dom.type = 'text';
		}
	},

	passwordFocus: function(){
		var idComp = "secret";
		var elm = Ext.get(idComp);
		try{
			var waterMarkText = Ext.getCmp(idComp).initialConfig.blankText;
			elm.removeClass('waterMark');
			elm.dom.type = 'password';
			if (elm.dom.value == waterMarkText) {
				elm.dom.value = "";
			}
		}
		catch(ex){

		}
	},

	_drawForm: function(){
		var _self = this;
		this.element.add(new Ext.form.FormPanel({
			id: "login_form",
			layout: "column",
			defaults: {
				xtype: 'textfield',
				style: 'margin:5px;'
			},
			items: [
				{
					id: 'username',
					blankText: "User name",
					value: "User name",
					cls: "ext_form_elm waterMark minSize",
					enableKeyEvents:true,
					listeners:{
						afterRender:function(){
							waterMarkById("username");
						}
					}
				},
				{
					id: 'secret',
					xtype: 'textfield',
					blankText: "Password",
					value: "Password",
					cls: "ext_form_elm waterMark minSize",
					enableKeyEvents: true,
					listeners: {
						blur: _self.passwordBlur,
						focus: _self.passwordFocus,
						keydown:function(ext,e){
							if(e.keyCode == e.ENTER){
								_self.presenter.login();
							}
						}
					}
				},
				{
					xtype: "tbbutton",
					text: 'Login',
					handler: function(){
						_self.presenter.login();
					}
				},
				{
					xtype: "panel",
					id:"login_error_msg",
					html:"error msg",
					style: 'margin:0 5px'
				}
			]
		}));
	}
}
Presenter.LoginPresenter = function(view){
	this.view = view;
}

Presenter.LoginPresenter.prototype = {


	initialize: function(){
		this.view.createElement();
	},

	getElement: function(){
		return this.view.getElement();
	},

	login: function(){
		if(this._validateForm()){
			this.view.showWaiting();
			var userLogin = new Events.AuthenticationEvent(Events.AuthenticationEvent.USER_LOGIN);
			userLogin.data = this.view.getFormData();
			GEvent.dispatchEvent(userLogin);
		}else{
			this.view.showInvalidMessage();
		}
	},

	redraw: function(){
		return this.view.redraw();
	},

	loginFailed: function(){
		this.view.showInvalidMessage();
	},

	showMyLayer: function(){
		GEvent.dispatchEvent(new Events.UtilitiesEvent(Events.UtilitiesEvent.VIEW_HIDE_ALL));
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MYLAYERS_SHOW));
	},

	showMap: function(){
		GEvent.dispatchEvent(new Events.UtilitiesEvent(Events.UtilitiesEvent.VIEW_HIDE_ALL));
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.VIEW_SHOW));
	},

	logout: function(){
		GEvent.dispatchEvent(new Events.AuthenticationEvent(Events.AuthenticationEvent.USER_LOGOUT));
	},

	drawUserProfile: function(){
		if(Authentication.getCurrentUserGroup() == 3 || Authentication.getCurrentUserGroup() == 1){
			return this.view._drawAdminProfile();
		}
		else{
			return this.view._drawUserWelcome();
		}
	},

	_validateForm: function(){
		var usernameBlankText = this.view.getUsernameBlankText();
		var usernameValue = this.view.getUserName();
		var passwordBlankText = this.view.getPasswordBlankText();
		var passwordValue = this.view.getPassword();

		var filled = (usernameValue != usernameBlankText) && (passwordValue != passwordBlankText);
		return (this.view.getUserName().length > 0 && this.view.getPassword().length > 0) && filled;
	}

}
View.LayerWindowView = function(){
	this.presenter = new Presenter.LayerWindowPresenter(this);
	this.presenter.initialize();
};

View.LayerWindowView.prototype = {
	createLayerWindows: function(){
		new Ext.Window({
			id: "layer_window",
			width: 270,
			title: 'Layers',
			closable: false,
			resizable: true,
			draggable: true,
			autoScroll:true,
			height:35,
			autoFill:true,
			renderTo:document.getElementById("region_center")
		});
	},

	resizeLayerWindow: function(){
		var layerWindow = Ext.getCmp("layer_window");
		var layerItems = Ext.select(".layerBar");
		var contentHeight = 32 + (35*layerItems.elements.length);


		try{
			contentHeight += Ext.fly("resource_form_for").getHeight();
		}
		catch(ex){}

		contentHeight = contentHeight > 590? 590 : contentHeight; // 590 is from top to bottom of layer window screen
		layerWindow.setHeight(contentHeight);
	},

	removeAllLayers: function(){
		var layer_window = Ext.getCmp("layer_window");
		layer_window.removeAll();
	},

	addLayerWithMembership: function(layer){
		var _self = this;
		var layer_window = Ext.getCmp("layer_window");
		layer_window.add({
			id: 'layer_' + layer.id,
			html: _self.generateLayerTitleOwner(layer),
			height: 35,
			cls :"layerBar",
			listeners:{
				afterRender: function(){
					Ext.get('new_layer_' + layer.id).on('click', function(){
						_self.presenter.renderResourceForm(layer.id);
					});

					Ext.get('layer_checkbox_' + layer.id).on('click', function(){
						var checked = this.dom.checked;
						_self.presenter.layerCheckboxClicked(layer.id,checked);
					});
					Ext.get('layer_title_' + layer.id).on('click', function(){
						var el = Ext.get("layer_checkbox_" + layer.id);
						if(el.dom.checked)
							_self.presenter.layerTitleClick(layer);
					});
				}
			}
		});
	},

	generateLayerTitle:function(layer){
		layer.icon = Util.func.getLayerIcon(layer.icon);
		var checked = this.presenter.getLayerChecked(layer.id);
		var layerTitleClass = checked? "": "disable";
		var str = "<div class='layerCheckBox' > <input id='layer_checkbox_"+layer.id+"' type='checkbox' name='checkbox[]' value='"+layer.id+"' "+ checked +" /> </div> ";
		str += "<div class='layerTitle' > <img src='"+ SETTING.MARKER_ICON_PATH+layer.icon +"' alt ='icon' align='left' />" + this.getLayerTitle(layer,layerTitleClass) +"</div>";
		return str;
	},

	generateLayerTitleOwner:function(layer){
		var checked = this.presenter.getLayerChecked(layer.id);
		var layerTitleClass = checked? "": "disable";
		layer.icon = Util.func.getLayerIcon(layer.icon);
		var str = "<div class='layerCheckBox'> <input id='layer_checkbox_"+layer.id+"' type='checkbox' name='checkbox[]' value='"+layer.id+"' "+ checked +" /> </div> ";
		str += "<div class='linkIcon' id='new_layer_" + layer.id + "' rel='" + layer.id + "' >  New </div>";

		str += "<div class='layerTitle' > <img src='"+ SETTING.MARKER_ICON_PATH+layer.icon +"' alt ='icon' align='left' />" + this.getLayerTitle(layer,layerTitleClass) +"</div>";
		return str;
	},

	getLayerTitle: function(layer, layerTitleClass){
		var str = " <a href='javascript:void(0);' id='layer_title_" + layer.id + "' rel='" + layer.id + "' class='" + layerTitleClass + "' >"+layer.name+" </a> ";
		return str;
	},

	addLayerWithoutMembership: function(layer){
		var _self = this;
		var layer_window = Ext.getCmp("layer_window");
		layer_window.add({
			id: 'layer_' + layer.id,
			html: _self.generateLayerTitle(layer),
			height: 35,
			cls :"layerBar",
			listeners:{
				afterRender:function(){
					Ext.get('layer_checkbox_' + layer.id).on('click', function(){
						var checked = this.dom.checked;
						_self.presenter.layerCheckboxClicked(layer.id,checked);
					});

					Ext.get('layer_title_' + layer.id).on('click', function(){
						var el = Ext.get("layer_checkbox_" + layer.id);
						if(el.dom.checked)
							_self.presenter.layerTitleClick(layer);
					});
				}
			}
		});
	},

	displayLayerWindow: function(){
		var layerWindow = Ext.getCmp("layer_window");
		layerWindow.show();
		layerWindow.toRightPostion = function(){
			var panelHeaderWidth = Ext.get("header").dom.offsetWidth;
			var panelHeaderHeight = Ext.get("header").dom.offsetHeight;
			var x = panelHeaderWidth - 270 - 5;//whole with minus window size include 5 margin to right
			var y =  25; // panelHeaderHeight coz now the parent is the map
			layerWindow.setPosition(x, y);//dom.style.left,dom.style.top,
		};
		layerWindow.toRightPostion();
		layerWindow.doLayout(); //to redraw window layout
	},

	removeAllOldResourceForm: function(layer){
		Ext.fly(layer.name).removeAll();
	},

	renderResourceForm: function(data){
		var _self = this;
		if (this.resource_form) {
			this.resource_form.removeAll();
			this.resource_form.destroy();
			this.resource_form = null;
			_self.presenter.removeDraggableMarker();
		}
		_self.removeResourceDetailForm();
		this.createResourceForm(data);
		this.resizeLayerWindow();
	},

	createResourceForm: function(data){
		var layerId = data.layer_id;
		var templates = data.templates;

		var _self = this;
		var formId = 'resource_form_for';
		var resourceId = 'resource_name';
		this.resource_form = new Ext.FormPanel({
			id: formId,
			cls: "layerForm",
			bodyStyle: 'padding: 5px;',
			renderTo: 'layer_' + layerId,
			hideLabels: true,
			autoShow :true,
			items: [
				{
					html: 'Add new item',
					cls: 'title',
				},
				{
					xtype: 'hidden',
					name: 'resource[layer_id]',
					value: layerId
				},
				{
					xtype: 'hidden',
					name: 'resource[lat]',
					id: "resource_lat",
					value: "" // SETTING.MARKER_DEFAULT_LAT,
				},
				{
					xtype: 'hidden',
					name: 'resource[lng]',
					id: "resource_lng",
					value: ""//SETTING.MARKER_DEFAULT_LNG,
				},
				{
					xtype: "panel",
					id: "resource_error_msg",
					width: 200,
					cls: "error_msg",
					html: "Error resource msg"
				},
				{
					xtype: 'textfield',
					id: resourceId,
					name: 'resource[name]',
					emptyText: ' Resource Name',
					cls: "resourceName",
					enableKeyEvents:true,
					listeners: {
						focus: _self.hideResourceMessage
					}
				},
				{
					xtype: "panel",
					html: "<a href='javascript:void(0);' class='linkLocation' id='location_anchor_" + layerId + "' > Select Location</a>",
					cls: "selectLocation",
					listeners: {
						afterRender: function(){
							Ext.select(".linkLocation").on("click", function(){
								Util.Cookies.set("selected_layer", layerId);
								_self.disableLayerWindow();
								_self.presenter.showSelectLocationWindow();
								_self.presenter.showDraggableMarker();
								return false;
							});
						}
					}
				},
				{
				  xtype: 'panel',
					id: 'properties_template',
					layout: 'form',
					cls: 'properties_template',
					style: 'clear:both;',
					items: _self.renderPropertyTemplates(templates)
				},
				{
					xtype: 'fieldset',
					id: 'properties_fieldset',
					title: 'Add new variable',
					cls: 'fieldset',
					layout: 'anchor',
					hideLabels: true,
					items: [
						{
							xtype: "panel",
							width: 200,
							id: "property_error_msg",
							cls: "error_msg",
							style: 'padding-left: 0px; display: none; margin-bottom: 5px;',
							html: "Label and Value can't be empty"
						},
						{
							layout: 'hbox',
							defaults: {
								margins: '0 5 0 0'
							},
							items: [
								{
									xtype: 'textfield',
									id: 'property_name',
									name: 'property[name]',
									emptyText: ' Label',
									flex: 2,
									enableKeyEvents: true,
									listeners: {
										focus: _self.hidePropertyMessage
									}
								},
								{
									xtype: 'textfield',
									id: 'property_value',
									name: 'property[value]',
									emptyText: ' Value',
									flex: 1,
									enableKeyEvents: true,
									listeners: {
										focus: _self.hidePropertyMessage
									}
								}
							]
						},
						{
							xtype: 'combo',
							id: 'templates',
							fieldLabel: 'Owner ',
							store: _self.generateStore(templates),
							typeAhead: true,
							triggerAction: 'all',
							lazyRender: true,
							mode: 'local',
							valueField: 'templates',
							displayField: 'templates',
							hiddenName: 'membership[user_id]',
							hideTrigger: true,
							typeAhead: true,
							minChars: 3,
							selectOnFocus: true,
							style: 'margin-top: 5px;display: none;',
						}
					],
					buttons:[{
						text: 'Add Field',
						handler: function(){
							var templateName = Ext.getCmp('templates').value;
							templateName =(templateName)?templateName:"default";
							_self.presenter.submitPropertyForm(templateName);
						}
					}]
				}
			],
			buttons: [
				{
					text: 'Save',
					handler: function(){
						_self.presenter.saveResource();
					}
				}
			]
		});
	},

	handleCreateResourceResponse: function(jsonData) {
		if(jsonData.name) {
			this.presenter.addResource(jsonData);
			this.presenter.removeDraggableMarker();
			this.presenter.resetDraggleMarkerPosition();
			this.resetResourceForm();
		}
		else {
			var errors = [];
			for(var i=0;i<jsonData.length;i++)
				{
					errors.push(jsonData[i][0]+" "+jsonData[i][1]);
				}
			alert(errors.join("\n"));
		}
	},

	closeSelectLocationWindow: function() {
		var select_location_window = Ext.getCmp("select_location_window");
		if(select_location_window)
			select_location_window.close();
	},

	disableLayerWindow: function(){
		Ext.getCmp("layer_window").disable();
	},

	enableLayerWindow: function() {
		Ext.getCmp("layer_window").enable();
	},

	updateLocationAnchor: function(text) {
		if (Ext.fly("location_anchor_" + Ext.util.Cookies.get("selected_layer")) != null)
		Ext.fly("location_anchor_" + Ext.util.Cookies.get("selected_layer")).update(text);
	},

	resetResourceForm: function(){
		Ext.getCmp('resource_name').reset();
		Ext.getCmp('resource_lat').reset();
		Ext.getCmp('resource_lng').reset();

		this.updateLocationAnchor("Select Location");
		this.presenter.resetPropertiesListForm();
		this.resetPropertyForm();
	},

	addLayerItem: function(layer){
		this.presenter.addLayerItem(layer);
	},

	hideResourceMessage: function() {
		if (Ext.fly("resource_error_msg") != null) {
			Ext.fly("resource_error_msg").update('').addClass("error_msg").show();
		}
	},

	hidePropertyMessage: function() {
		if (Ext.fly("property_error_msg") != null) {
			Ext.fly("property_error_msg").dom.style.display="none";
		}
	},

	createSelectLocationWindow: function() {
		var _self = this;
		var windowLocation =Ext.getCmp("select_location_window");
		if (windowLocation) 	;
		else {
			windowLocation = new Ext.Window({
				id: "select_location_window",
				title: "Select Location",
				frame: true,
				width: 300,
				renderTo: 'region_center',
				closable: false,
				resizable: false,
				draggable: false,
				items:[{
						xtype:"panel",
						html: "<p class='paragraph_msg'>Move the pin to your prefer location. Click on done when finished.</p>",
					},
					{
						html: "",
						id: 'latLngStatus'
					},
					{
						xtype: 'panel',
						layout: 'form',
						cls: 'paragraph_msg',
						items: [
							{
								xtype: 'textfield',
								fieldLabel: 'Lat',
								id: "resource_lat_tmp",
								name: 'resourceLat',
								labelStyle: 'width: 60px;',
								cls: "minSizeValue",
							},
							{
								xtype: 'textfield',
								fieldLabel: 'Lng',
								id: "resource_lng_tmp",
								name: 'resourceLng',
								labelStyle: 'width: 60px;',
								cls: "minSizeValue",
							}
						]
					}
				],
				buttons: [
					{
						text: 'Done',
						handler: function() {
							var lat = Ext.getCmp('resource_lat_tmp').el.dom.value;
							var lng = Ext.getCmp('resource_lng_tmp').el.dom.value;
							if(_self.valideLatLng(lat, lng)){
								_self.enableLayerWindow();
								_self.updateLocationAnchor('Change Location');
								_self.presenter.setMarkerUnDraggable();
								_self.presenter.setPositionDraggableMarker(lat,lng);
								_self.setLatLng(lat, lng);
								_self.presenter.updateResourceLatLngObject(lat, lng);
								_self.closeSelectLocationWindow();
							}
						}
					}
				]
			});
		}
		windowLocation.show();
		windowLocation.setPosition(90,3);
	}	,

	getFormData: function(id) {
		return Ext.getCmp(id).getForm().getValues();
	},

	showLoginError: function() {
		Ext.fly("login_error_msg").update("Invalid login").replaceClass("login_request", 'login_error').show();
	},

	showRequestLoginMsg: function(){
		Ext.fly("login_error_msg").update("Waiting for server response").replaceClass('login_error', "login_request").show();
	},

	showResourceMessage: function(message,cls) {
		if (Ext.fly("resource_error_msg")){
			Ext.fly("resource_error_msg").update(message).replaceClass("login_request", 'login_error').show();
			Ext.fly("resource_error_msg").dom.className = cls;
		}
	},

	showPropertyMessage: function(message, className) {
		Ext.fly("property_error_msg").update(message);
		Ext.fly("property_error_msg").dom.className = className;
		Ext.fly("property_error_msg").dom.style.display= "block";
	},

	hideResourceMessage: function() {
		if (Ext.fly("resource_error_msg") != null) {
			Ext.fly("resource_error_msg").update('').addClass("error_msg").show();
		}
	},

	renderResourceDetail: function(resource){
		var _self = this;
		_self.removeResourceForm();
		_self.removeResourceDetailForm();
		_self.closeSelectLocationWindow();
		_self.enableLayerWindow();
		_self.createResourceDetailForm(resource);
		_self.presenter.removeDraggableMarker();
		_self.resizeLayerWindow();
	},

	createResourceDetailForm: function(resource){
		var _self = this;
		var layerWindowId = "layer_" + resource.layer_id;
		new Ext.FormPanel({
				cls: "layerForm",
				bodyStyle: 'padding: 5px',
				id: "resource_form_for",
				renderTo: layerWindowId,
				hideLabels: true,
				items: [{
					html: _self.resourceDetailHtml(resource),
					cls: "dataDetail",
				}],
				listeners:{
					afterRender: function(){
						try {
							Ext.get("edit_resource").on('click', function(){
								var id = this.dom.rel;
								_self.presenter.editResource(id);
							});
						}catch(ex){}
					}
				}
		});
	},

	removeResourceForm: function(){
		if (this.resource_form) {
			this.resource_form.removeAll();
			this.resource_form.destroy();
		}
	},

	removeResourceDetailForm: function(){
		if (Ext.getCmp("resource_form_for")) {
			Ext.getCmp("resource_form_for").destroy();
		}
	},

	resourceDetailHtml: function(resource){
		var templates = resource.templates;
		var _self = this;
		var str = "<ul>";
		str += "<li>"
			+"<div style='float:left;' ><span class='resource-name-title'>" + resource.name
			+"<span>" +"[ID=" + resource.id +"]" +"</span>" +"</div>";
		if(_self.presenter.canUpdate(Helper.layerHelper.getLayer(resource.layer_id))){
			str += "<div style='float:right' > <a href='javascript:void(0)' class='edit' id='edit_resource'  rel='" + resource.id + "' > Edit  </a> </div>";
		}
		str += "<li class='clear' ><ul class='sub-item'>";

		var templateExists = false;
		for(templateName in templates ){
			var propertyExist = false;
			var strTag = "";
			var template = templates[templateName];
			strTag += "<li>";
			strTag += "<fieldset><legend class='label-template-name'>" +Util.func.getTemplateName(templateName) +"</span></legend>";
			strTag += "<ul>";
			for(propertyName in template){
				var propertyValue = template[propertyName];
				if (propertyValue) {
					strTag += "<li>";
					strTag += "<label class='label-property-name'>" + propertyName + "</label>";
					strTag += ":<span>" + propertyValue + "</span>"
					strTag += "</li>";
					propertyExist = true;
				}
			}
		  strTag += "</ul>";
			strTag += "</fieldset>";
			strTag += "</li>";
			if (propertyExist) {
	  		str += strTag;
				templateExists = true;
	  	}
		}
		if(!templateExists){
			str += "<li><span class='no-record'>No Variable(s)</span></li>";
		}
		str += "</ul></li>";
		str += "</ul>";
		return str;
	},

	getTemplateField: function(templateName){
		var element = Ext.getCmp("properties_fieldset_" + Util.func.replaceSpaceToUnderscore(templateName));
		if (!element) {
			element = this.createTemplateFieldSet(templateName);
		}
		return element;
	},

	addPropertyToResource: function(property, templateName){
		templateName = templateName || "default";
		var properties_list_panel = this.getTemplateField(templateName);

		properties_list_panel.add(this.createTextFieldElement(property, templateName));
		properties_list_panel.doLayout();
	},

	createTextFieldElement: function(property,templateName){
		var _self = this;
		var textField = new Ext.form.TextField({
			id: "property_" +property.name,
			fieldLabel: property.name,
			labelStyle: 'width: 60px;',
			value: property.value,
			cls: "minSizeValue",
			templateName:templateName,
			listeners:{
				change: function(){
					var templateName = this.templateName;
					_self.presenter.propertiesListChanged(property.name, textField.el.dom.value,templateName);
				}
			}
		});
		return textField;
	},

	getPropertyName: function(){
		return Ext.getCmp('property_name').el.dom.value;
	},

	getPropertyValue: function(){
		return Ext.getCmp('property_value').el.dom.value;
	},

	getPropertyNameEmptyText: function(){
		return Ext.getCmp('property_name').emptyText;
	},

	getPropertyValueEmptyText: function(){
		return Ext.getCmp('property_value').emptyText;
	},

	resetPropertyForm: function(){
		Ext.getCmp('property_name').reset();
		Ext.getCmp('property_value').reset();
		Ext.getCmp('templates').reset();
	},

	getResourceFormData: function(){
		return this.getFormData('resource_form_for');
	},

	getResourceNameEmptyText: function(){
		return Ext.getCmp('resource_name').emptyText;
	},

	resetTextFieldById: function(textFieldId){
		Ext.getCmp(textFieldId).reset();
		Ext.getCmp(textFieldId).el.dom.value = "";
	},

	handleActiveLayer:function(layerId,checked){
		this.presenter.handleActiveLayer(layerId,checked);
	},

	showResourcesListWindow: function(layer){
		var _self = this;
		var layerIdHidden = "layer_id_resource_list";
		var wndId = "resource_list_window";
		var resourceListGridId = "resource_list_grid";
		var myPageSize = 30 ;
		var windowResourceList =Ext.getCmp(wndId);
		var url = SETTING.WEBROOT + "layers/"+layer.id+"/resources.json";
		if (windowResourceList) {
			var store = Ext.getCmp("resource_list_grid").store ;
			store.proxy.api.read.url = url;
			store.load({params:{start:0, limit:myPageSize}});
		}
		else {
			var proxy = new Ext.data.HttpProxy({
				method: 'GET',
				api: {
						read : url
					}
			});

			var resourceRecord = Ext.data.Record.create([
				{name: 'id'},
				{name: 'name',type: 'string'}
			]);

			var readerOption = {
				totalProperty: 'total',
				successProperty: 'success',
				idProperty: 'id',
				root: 'rows',
				messageProperty: 'message'
			};
			var reader = new Ext.data.JsonReader(readerOption,resourceRecord);

			var store = new Ext.data.Store({
				id: 'resources_list_store',
				proxy: proxy,
				reader: reader
			});
			var windowWidth = 400;
			windowResourceList = new Ext.Window({
				id: wndId,
				title: "<span><b>List</b> Resources</span>",
				frame: true,
				width: windowWidth,
				renderTo: 'region_center',
				closable: true,
				resizable: true,
				draggable: true,
				layout:'fit',
				autoScroll:true,
				height:300,
				items:{
						xtype:"grid",
						id:resourceListGridId,
						store: store,
						cls : 'clickable',
						layout:'fit',
						height:180,
						autoScroll:true,
						columns: [
							new Ext.grid.RowNumberer({width : 30,header:"#",renderer:_self.generateRecordNumber}),
							{ header: "NAME",sortable: true,dataIndex: 'name',width:250,renderer:_self.generateResourceName}
						],
						frame:true,
						bbar: new Ext.PagingToolbar({
							store: store,
							displayInfo: true,
							pageSize: myPageSize,
							prependButtons: true,
						}),
						listeners: {
							cellclick : function( grid, rowIndex,columnIndex,e ){
								var resourceId = grid.store.data.items[rowIndex].data.id;
								_self.presenter.showResourceDetail(resourceId);
							}
						}
					}
				});
			store.load({params:{start:0, limit:myPageSize}});
		}
		windowResourceList.setTitle(_self.generateResourceTitle(layer));
		var layerWindow = Ext.getCmp("layer_window");
		var pos= layerWindow.getPosition();
		windowResourceList.setPosition(pos[0] - windowWidth , pos[1] - 50);
		windowResourceList.show();
	},

	generateResourceTitle:function(layer){
		var icon = Util.func.getLayerIcon(layer.icon);
		var str = "<img src='"+ SETTING.MARKER_ICON_PATH + icon +"' align='left' /> <span class='windowTitle' > "+layer.name+"</span>";
		return str;
	},

	generateRecordNumber: function(v, p, record, rowIndex){
		var store = Ext.getCmp("resource_list_grid").store ;
		try {
			start = parseInt(Ext.getCmp("resource_list_grid").store.reader.jsonData.start);
		}catch(ex){ start = 0};
		 p.attr = "ext:qtip='Click on here to see the detail' ext:qtitle='' ";
		return rowIndex+start+1;
	},

	generateResourceName:function(v, p, record, rowIndex){
		p.attr = "ext:qtip='Click on here to see the detail' ext:qtitle='' ";
		return v;
	},

	setLayerTitleClass: function(id, checked){
		var el = Ext.get("layer_title_" + id);
		try{
			if(checked == false)
				el.dom.className = "disable";
			else
				el.dom.className = "";
		}catch(ex){
		}
	},

	redraw: function(){
		this.draw();
	},

	draw: function(){
		this.presenter.showLayerWindow();
	},

	updateResourceLatLngDragging:function(latLng){
		Ext.getCmp('resource_lat_tmp').el.dom.value = Util.func.formatPrecision(latLng.lat,6);
		Ext.getCmp('resource_lng_tmp').el.dom.value = Util.func.formatPrecision(latLng.lng,6);
	},

	renderEditResourceForm: function(resource){
		var _self = this;
		if (this.resource_form) {
			this.resource_form.removeAll();
			this.resource_form.destroy();
			this.resource_form = null;
			_self.presenter.removeDraggableMarker();
		}
		_self.removeResourceDetailForm();
		this.createEditResourceForm(resource);
		this.resizeLayerWindow();
	},

	createEditResourceForm: function(resource){
		var _self = this;
		var formId = 'resource_form_for';
		var resourceId = 'resource_name';
		this.resource_form = new Ext.FormPanel({
			id: formId,
			cls: "layerForm",
			bodyStyle: 'padding: 5px',
			renderTo: 'layer_' + resource.layer_id,
			hideLabels: true,
			autoShow :true,
			items: [
				{
					html: 'Edit item',
					cls: 'title'
				},
				{
					xtype: 'hidden',
					name: 'resource[layer_id]',
					value: resource.layer_id
				},
				{
					xtype: 'hidden',
					name: 'resource[lat]',
					id: "resource_lat",
					value: resource.lat
				},
				{
					xtype: 'hidden',
					name: 'resource[lng]',
					id: "resource_lng",
					value: resource.lng
				},
				{
					xtype: "panel",
					id: "resource_error_msg",
					width: 200,
					cls: "error_msg",
					html: "Error resource msg"
				},
				{
					xtype: 'textfield',
					id: resourceId,
					name: 'resource[name]',
					emptyText: ' Resource Name',
					value: resource.name,
					cls: "resourceName",
					enableKeyEvents:true,
					listeners: {
						focus: _self.hideResourceMessage
					}
				},
				{
					xtype: "panel",
					html: "<a href='javascript:void(0);' class='linkLocation' id='location_anchor_" + resource.layer_id + "' > Change Location</a>",
					cls: "selectLocation",
					listeners: {
						afterRender: function(){
							Ext.select(".linkLocation").on("click", function(){
								Util.Cookies.set("selected_layer", resource.layer_id);
								_self.disableLayerWindow();
								var latlng = Ext.getCmp('resource_lat').el.dom.value + "," +	Ext.getCmp('resource_lng').el.dom.value;
								_self.presenter.showSelectLocationWindow();
								_self.presenter.showDraggableMarker(latlng);
								return false;
							});
						}
					}
				},
				{
				  xtype: 'panel',
					id: 'properties_template',
					layout: 'form',
					style: 'clear:both;',
					items: _self.renderPropertyTemplates(resource.templates)
				},
				{
					xtype: 'fieldset',
					id: 'properties_fieldset',
					title: 'Add new variable',
					layout: 'anchor',
					hideLabels: true,
					items: [
						{
							xtype: "panel",
							width: 200,
							id: "property_error_msg",
							cls: "error_msg",
							style: 'padding-left: 0px; display: none; margin-bottom: 5px;',
							html: "Label and Value can't be empty"
						},
						{
							layout: 'hbox',
							defaults: {
								margins: '0 5 0 0'
							},
							items: [
								{
									xtype: 'textfield',
									id: 'property_name',
									name: 'property[name]',
									emptyText: ' Label',
									flex: 2,
									enableKeyEvents:true,
									listeners: {
										focus: _self.hidePropertyMessage
									}
								},
								{
									xtype: 'textfield',
									id: 'property_value',
									name: 'property[value]',
									emptyText: ' Value',
									flex: 1,
									enableKeyEvents:true,
									listeners: {
										focus: _self.hidePropertyMessage
									}
								}
							]
						}
						,{
							xtype: 'combo',
							id: 'templates',
							fieldLabel: 'Owner ',
							store: _self.generateStore(resource.templates),
							typeAhead: true,
							triggerAction: 'all',
							lazyRender:true,
							mode: 'local',
							valueField: 'templates',
							displayField: 'templates',
							hiddenName: 'membership[user_id]',
							hideTrigger: true,
							typeAhead: true,
							minChars: 3,
							selectOnFocus: true,
							style: 'margin-top: 5px; display: none;',
						}
					],
					buttons:[{
						text: 'Add Field',
						handler: function(){
							var templateName = Ext.getCmp('templates').value;
							templateName =(templateName)?templateName:"default";
							_self.presenter.submitPropertyForm(templateName);
						}
					}]
				}
			],
			buttons: [
				{
					text: 'Updates',
					handler: function(){
						_self.presenter.saveResource('Update');
					}
				}
			]
		});
	},

	renderPropertyTemplates:function(templates){
		var result = new Array();
		for(templateName in templates){
		  var properties = templates[templateName]
			var fieldset = {
				xtype: 'fieldset',
				id: 'properties_fieldset_'+Util.func.replaceSpaceToUnderscore(templateName),
				title: Util.func.getTemplateName(templateName),
				items: this.renderProperties(properties,templateName),
				cls: 'properties_template fieldset'
			}
			result.push(fieldset);
		}
		return result;
	},

	renderProperties: function(properties,templateName){
		var result = [];
		for(propertyName in properties){
			var propertyValue = properties[propertyName];
			property = {};
			property['name'] = propertyName;
			property['value'] = propertyValue;
			var elm = this.createTextFieldElement(property,templateName);
			result.push(elm);
		}
		return result;
	},

	generateStore: function(templates){
		var dataTemplates = [];
		for(templateName in templates)
		  dataTemplates.push([templateName,templateName]);
			var myStore =  new Ext.data.ArrayStore({
        fields: [
            'templates',
            'templates'
        ],
        data: dataTemplates
    });
		return myStore;
	},

	createTemplateFieldSet: function(templateName){
		var _self = this;
		var fieldsetId = 'properties_fieldset_'+Util.func.replaceSpaceToUnderscore(templateName);
		var fieldset = new Ext.form.FieldSet({
						id: fieldsetId,
						title: Util.func.getTemplateName(templateName),
						cls: 'properties_template fieldset'
					});
		Ext.getCmp("properties_template").add(fieldset);
		Ext.getCmp("properties_template").doLayout();
		return fieldset;
	},

	setLatLng: function(lat, lng){
		var formPanelId = "resource_form_for";
		formDom = Ext.getCmp(formPanelId).form.el.dom;
		formDom["resource[lat]"].value = lat;
		formDom["resource[lng]"].value = lng;
	},

	resetTemplate: function(templateName){
		this.presenter.resetTemplate(templateName);
	},

	formRedraw: function(){
		Ext.getCmp("resource_form_for").doLayout();
	},

	valideLatLng: function(lat, lng){
		if(parseFloat(lat) >= -90 && parseFloat(lat) <= 90 && parseFloat(lng) >= -180 && parseFloat(lng) <= 180){
			return true;
		}
		else{
			this.generateErrorLocation();
			return false;
		}
	},

	generateErrorLocation: function(){
		Ext.getCmp("latLngStatus").el.update("<div class='error_msg' style='display:block;'><p class='paragraph_msg'>Lat or Lng is not valid</p></div>");
	}

};
Presenter.LayerWindowPresenter = function(view){
	this.view = view;
	var _self = this;

	this.resetResource = function(){
		_self.resource = {};
		_self.resource.templates = {};
	};
};

Presenter.LayerWindowPresenter.prototype ={
	initialize:function(){
		this.view.createLayerWindows();
		this.resetResource();
	},

	populateLayers: function(layers){
		this.view.removeAllLayers();
		for(var i=0;i<layers.length;i++){
			var layer = layers[i];
			this.view.addLayerItem(layer);
		}
		this.view.displayLayerWindow();
		this.view.resizeLayerWindow();
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYERS_LOAD_COMPLETED));
	},

	canUpdate: function(layer)
	{
		user_id = Authentication.getCurrentUserId();
		var membership = Util.func.getUserMembership(layer, user_id);
		if(membership){
			var isOwner = membership.role == 'Owner';
			var hasUpdateAccess = membership.access_rights & SETTING.ACCESS_RIGHTS_UPDATE;

			return isOwner || hasUpdateAccess;
		}

		return false;
	},

	addLayerItem: function(layer){
		if (this.canUpdate(layer)) {
			this.view.addLayerWithMembership(layer);
		} else{
			this.view.addLayerWithoutMembership(layer);
		}
	},

	showLayerWindow: function(){
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYERS_LOAD));
	},

	removeDraggableMarker: function() {
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.MAPS_MARKER_REMOVE));
	},

	showSelectLocationWindow : function(){
		this.view.createSelectLocationWindow();
	},

	showDraggableMarker: function(strLatLng){
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.MAPS_MARKER_SHOW_DRAGGABLE,strLatLng));
	},

	setMarkerUnDraggable: function(){
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.MAPS_MARKER_UNDRAGGABLE));
	},

	saveResource: function(update) {
		var resourceForm = this.view.getResourceFormData();
		var resourceNameEmptyText = this.view.getResourceNameEmptyText();
		if(resourceForm["resource[name]"] == resourceNameEmptyText || resourceForm["resource[name]"] == ""){
			this.view.showResourceMessage("Please enter the resource name ", "error");
			return;
		}
		else if(resourceForm["resource[lat]"]=="" || resourceForm["resource[lng]"]== ""){
			this.view.showResourceMessage("Please select location ", "error");
			return;
		}

		this.resource.name = resourceForm["resource[name]"];
		this.resource.lat = resourceForm["resource[lat]"];
		this.resource.lng = resourceForm["resource[lng]"];
		this.resource.layer_id = resourceForm["resource[layer_id]"];
		this.saveResourceWithDispatchEvent(update);
	},

	saveResourceWithDispatchEvent: function(update){
	  param = this.resource;

		if(update)
		  GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCES_UPDATE, param));
		else
			GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCES_SAVE, param));
	},

	createNewMaker: function(resource){
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.MAPS_MARKER_DRAGGABLE_RESET, resource));
	},

	updateForm: function(data){
		if(data){
			window.data = data;
			this.view.showResourceMessage("Item is created successfully", "success");
			this.view.resetResourceForm();
			this.createNewMaker(data);
			this.resetResource();
		}
		else{
			this.view.showResourceMessage("Failed to create resource", "error");
		}
	},

	renderResourceDetail: function(resource){
		this.view.renderResourceDetail(resource);
		this.view.resizeLayerWindow();
	},

	submitPropertyForm: function(templateName){
		var propertyName = this.view.getPropertyName();
		var propertyValue = this.view.getPropertyValue();

		propertyNameEmptyText = this.view.getPropertyNameEmptyText();
		propertyValueEmptyText = this.view.getPropertyValueEmptyText();

		if(propertyName == propertyNameEmptyText || propertyValue == propertyValueEmptyText){
			this.view.showPropertyMessage("Label and Value fields can not be empty", "error");
			return;
		}

		var property = {
			name: this.view.getPropertyName(),
			value: this.view.getPropertyValue()
		};

		if(!this.resource.templates[templateName]){
			this.resource.templates[templateName] = {};
		}

		this.resource.templates[templateName][propertyName] = propertyValue;
		this.addPropertyToResource(property,templateName);
		this.resetPropertyForm();
		this.view.formRedraw();
	},

	createTemplateFieldSet: function(templateName){
		this.view.createTemplateFieldSet(templateName);
	},

	propertiesListChanged: function(propertyName, propertyValue,templateName){
		templateName = (templateName)?templateName:"default";
		this.resource.templates[templateName] = this.resource.templates[templateName] || {}
		this.resource.templates[templateName][propertyName] = propertyValue;
	},

	addPropertyToResource: function(property,templateName){
		this.view.showPropertyMessage("Field has been created successfully", "success");
		this.view.addPropertyToResource(property,templateName);
	},

	resetPropertyForm: function(){
		this.view.resetPropertyForm();
	},

	resetPropertiesData: function(){
		this.resource.templates['default'] = {
			name: 'default',
			properties: {
			}
		}
	},

	renderResourceForm: function(layerId){
		this.resetResource();
		var templatesLoad = new Events.TemplatesEvent(Events.TemplatesEvent.TEMPLATES_LOAD,layerId);
		GEvent.dispatchEvent(templatesLoad);
	},

	populateTemplates: function(data){
		this.view.renderResourceForm(data);
	},

	resetPropertiesListForm: function(){
		for(templateName in this.resource.templates){
			this.view.resetTemplate(templateName);
		}
	},

	resetTemplate: function(templateName){
	  var properties = this.resource.templates[templateName];
		for(propertyName in properties){
			var textFieldId = "property_" +propertyName;
			this.view.resetTextFieldById(textFieldId);
		}
	},

	layerCheckboxClicked: function(id,checked){
		this.view.handleActiveLayer(id,checked);//must be called first
		this.view.setLayerTitleClass(id,checked);
		var markerStatus  = new Events.MapsEvent(Events.MapsEvent.MARKER_STATUS);
		GEvent.dispatchEvent(markerStatus);
	},

	handleActiveLayer:function(layerId,checked){
		Util.func.setLayerChecked(layerId,checked)
	},

	getLayerChecked: function(layerId){
		return (Util.func.getLayerChecked(layerId))?" checked " : "" ;
	},

	layerTitleClick: function(layer){
		this.view.showResourcesListWindow(layer);
	},

	showResourceDetail: function(id){
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_LOAD_DETAIL_FOR_RESOURCE_LIST, id));
	},

	redraw: function(){
		this.view.redraw();
	},

	updateResourceLatLngDragging:function(latLng){
		this.view.updateResourceLatLngDragging(latLng);
	},

	editResource: function(resourceId){
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_EDIT, resourceId));
	},

	renderEditResourceForm: function(resource){
		this.resource = resource;
		this.view.renderEditResourceForm(resource);
	},

	handleUpdateSuccess: function(){
		this.showResourceDetail(this.resource.id);
	},

	setPositionDraggableMarker: function(lat, lng){
		latLng = {}
		latLng['lat'] = lat;
		latLng['lng'] = lng;
		GEvent.dispatchEvent(new Events.MapsEvent(Events.MapsEvent.SET_POSITION_DRAGGABLE_MARKER, latLng));
	},

	updateResourceLatLngObject: function(lat, lng){
		this.resource.lat = lat;
		this.resource.lng = lng;
	}

};
View.ImportResourcesView = function(){
	this.element = null;
	this.presenter = new Presenter.ImportResourcesPresenter(this);
};

View.ImportResourcesView.prototype = {
	createImportResourcesWindow: function(data){
		var _importView = this ;
		if(!_importView.getImportResourcesWindow()){
			new Ext.Window({
				id: "import_resources_window",
				title: "Import Resources",
				closable: true,
				draggable: true,
				width:400,
				zIndex :30000,
				modal: true,
				autoHeight:true,
				items:[
					{
					xtype:"panel",
					cls:'paragraph_msg',
					autoHeight:true,
					items:[
						  {
								id: "import_resources_title",
								html : "Import Resources",
								frame: true
						  },
						  {
								id: "swf_container",
								html : _importView.swfContainer(),
								frame: false,
								listeners:{
									afterRender:function(){
										Ext.fly("import_button").on("click",function(){
											_importView.presenter.startImportResources(SETTING.swfImport);
										});
									}
								}
							}
						]
					},
					{
						xtype: 'hidden',
						value: data.id,
						id: 'importLayerId'
					}
				],
				listeners:{
					afterRender: function(){
						_importView.createFlashUploadObj(data.id);
						_importView.generateUploadLabel(data.layer_name);
					},

					close: function(){
						SETTING.swfImport = null;
					}
				}
			});
		}
	},

	getLayerId: function(){
		return Ext.getCmp('importLayerId').value;
	},

	createFlashUploadObj:function(layer_id){
		var _importView = this;
		var options = {
			flash_url : window.SETTING.WEBROOT + "javascripts/lib/swfupload/Flash/swfupload.swf",
			upload_url: window.SETTING.UPLOAD_IMPORT_RESOURCES,
			post_params: {"auth_token" : Authentication.getAuthToken(), "layer_id":layer_id},
			file_size_limit : "500 KB",
			file_types : "*.csv",
			file_types_description : "All Files",
			file_upload_limit : 100,
			file_queue_limit : 100,

			custom_settings : {
				progressTarget : "fsUploadProgress",
				cancelButtonId : "btnCancel"
			},

			button_image_url: SETTING.WEBROOT + "images/upload.png",
			button_width: "100",
			button_height: "30",
			button_text : "Choose File " ,
			button_placeholder_id: "spanButtonPlaceHolder",
			button_text_style: ".theFont { font-size:28px; } ",
			button_text_left_padding: 12,
			button_text_top_padding: 3,
			button_cursor : SWFUpload.CURSOR.HAND,
			button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE,

			file_queued_handler : _importView.presenter._fileQueued,
			file_queue_error_handler :_importView._fileQueueError,

			upload_start_handler : _importView.presenter._uploadStart,
			upload_progress_handler :_importView.presenter._uploadProgress,
			upload_error_handler : _importView.presenter._uploadError,
			upload_success_handler : _importView.presenter._uploadSuccess
		};
		window.SETTING.swfImport = new SWFUpload(options);
		window.SETTING.swfImport.addSetting();
	},

	generateUploadLabel: function(layer_name){
		var str = "<div> Import resources to layer <span class='highText'> " + layer_name +"</span>  </div>" ;
		str += "<div> Maximum size <span class='highText'> " + SETTING.swfImport.settings.file_size_limit + "</span>  </div><br />";
		Ext.fly("import_resources_title").update(str);
	},

	showImportResourcesWindow: function(){
		this.getImportResourcesWindow().show();
	},

	hideImportResourcesWindow: function(){
		this.getImportResourcesWindow().hide();
	},

	closeImportResourcesWindow: function(){
		this.getImportResourcesWindow().close();
	},
	getImportResourcesWindow:function(){
		return Ext.getCmp("import_resources_window");
	},

	swfContainer:function(){
		str ='<div class="fieldset flash" id="fsUploadProgress"> <span class="legend"> </span></div>';

		str += "<div id='status'>";
		str +=		"<div id='progress_wrapper'> ";
		str +=			"<div id='progress'> </div>";
		str +=		"</div>";
		str +=			"<div id='percentage'> 0% </div>";
		str +=	"</div>";

		str += "<div class='clear'> </div>";
		str += "<div id='fileUpload' class='fileUpload'> Please select a file to import </div> ";
		str +="<div class='clear'></div>";
		str += '<div style="float:right;" >' ;
		str +=		'<span id="spanButtonPlaceHolder"> </span>';
		str +=		'<a href ="javascript:void(0)" name="Upload" id="import_button" class="upload_button" > <span> Upload </span> </a>';
		str += '</div> ';
		return str;
	},


	fileQueued:function(file){
		SETTING.swfImport.QueueFile = file;
		var propertyFile = '<span class="fname">' + file.name + '</span>';
		propertyFile += ' : <span class="fsize">(' + file.size + 'Bytes) </span>';
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileFail','fileUpload');
	},

	fileQueueError:function(file, error_code, message){
		var propertyFile = '<div><span class="fname">' + file.name + '</span>';
		propertyFile += ' : <span class="fsize">(' + file.size + ' Bytes)</span></div>';
		propertyFile += '<div> ' + message + "</div>";
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
		SETTING.swfImport.QueueFile = null;
	},

	uploadStart:function(file){
		Ext.fly("status").setStyle({"visibility":"visible"});
	},

	uploadProgress:function(file, byteComplete, totalBytes){
		var percentage = 100*(byteComplete/totalBytes);
		percentage = (parseInt(percentage*100))/100;
		var width = (byteComplete/totalBytes) * 180;
		Ext.fly("progress").setStyle({"width":width+"px"});
		Ext.fly("percentage").update(percentage+"% ");
	},

	uploadError:function(file, code, httpErrorCode){
		try{
			var propertyFile = '<div><span class="fname">' + file.name + '</span>';
			propertyFile += ' : <span class="fsize">(' + file.size + ' Bytes)</span></div>';
			propertyFile += '<div> Http status : <b> ' + httpErrorCode + "</b></div>";
			propertyFile += '<div> <b> Please try again later </b></div>';
			Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
		}
		catch(Ex){
		}
		SETTING.swfImport.QueueFile = null;
		Ext.fly("status").setStyle({"visibility":"hidden"});
	},

	importSuccess:function(file, responseText, response){
			Ext.fly("status").setStyle({"visibility":"hidden"});
			this.getImportResourcesWindow().close();
	},

	showUploadFileNullError: function(){
		var propertyFile = '<div> ' + 'Please select file to upload' + "</div>";
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
	}

}
Presenter.ImportResourcesPresenter = function(view){
	this.view = view;
	_this = this;
	this.children = {};
}

Presenter.ImportResourcesPresenter.prototype = {
	showImportResourceWindow: function(data){
		this.view.createImportResourcesWindow(data);
		this.view.showImportResourcesWindow();
	},

	startImportResources: function(swf){
		if(!swf.QueueFile ){
			this.view.showUploadFileNullError();
			return;
		}
		GEvent.dispatchEvent(new Events.UtilitiesEvent(Events.UtilitiesEvent.IMPORT_RESOURCES,swf))
	},


	_fileQueued: function(file){
		_this.view.fileQueued(file);
	},

	_fileQueueError: function(file, error_code, message){
		_this.view.fileQueueError(file, error_code, message);
	},

	_uploadStart:function(file){
		_this.view.uploadStart(file);
	},

	_uploadProgress:function(file, byteComplete, totalBytes){
		_this.view.uploadProgress(file, byteComplete, totalBytes);
	},

	_uploadError:function(file, code, httpErrorCode){
		_this.view.uploadError(file, code, httpErrorCode);
	},

	_uploadSuccess:function(file, responseText){
		var layerId = _this.view.getLayerId();
		_this.view.closeImportResourcesWindow();
		var data = {};
		data['layerId'] = layerId;
		data['responseText'] = responseText;
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.LOAD_CONFIRMED_RESOURCES,data));
	},

	reloadData: function(){
		this.loaded = false;
	}


}
View.ConfirmDataResourcesView = function(){
	this.element = null;
	this.presenter = new Presenter.ConfirmDataResourcesPresenter(this);
}

View.ConfirmDataResourcesView.prototype = {
	createConfirmDataResourcesWindow: function(content){
		var _self = this;
		var wndId = 'confirm_window';
		var data = Json.decode(content.responseText);
		var headerData = data.content[0];
		var windowWidth = 150 + (100* headerData.length);
		windowWidth = (windowWidth>1024)?1024:windowWidth;
		var windowResourceList = new Ext.Window({
			id: wndId,
			title: "List Import Data",
			frame: true,
			width: windowWidth,
			height:300,
			closable: true,
			resizable: true,
			draggable: true,
			layout:'anchor',
			modal: true,
			items:_self.generateConfirmItems(data)
		});
		windowResourceList.show();
	},

	generateConfirmItems: function(data){
		var _self = this;
		var resourceListGridId = 'confirm_grid';
		var rowHeader = data.content[0];
	  var rows = data.content.slice(1);
		var result = [];
		if(this.invalidResourcesExist(rows)){
			result.push(
				{
					html: 'Record(s) in red can not be imported',
					id: 'grid_error_title',
					cls: 'error',
					style:'height:20px;',
					anchor: "100%"
				});
		}
		result.push(
			{
				xtype:"grid",
				id:resourceListGridId,
				store: _self.generateGridStore(data),
				cls : 'clickable',
				anchor: "100% 90%" ,
				autoScroll:true,
				frame:true,
				columns: _self.generateColumnHeaderGrid(rowHeader),
				buttons: [
					{
						text: "<span id='buttonConfirmImport'>Cancel</span>",
						handler :function(){
							Ext.getCmp('confirm_window').close();
						}
					},
					{
						text: "<span id='buttonConfirmImport'>Confirm Import</span>",
						handler :function(){
							var fileName = Ext.getCmp('fileName').value;
							var layerId = Ext.getCmp('importLayerId').value;
							_self.presenter.confirmImport(fileName, layerId);
						}
					}
				]
			},
			{
				xtype: 'hidden',
				value: data.layer_id,
				id: 'importLayerId'
			},
			{
				xtype: 'hidden',
				id: 'fileName',
				value: data.file_name
			}
		);

		return result;
	},

	generateColumnHeaderGrid: function(column){
		var arrCol = [];
		for(var i = 0; i < column.length; i++){
			var width = 100;
			if(i<column.length-1)
				width = 100;
		  else
				width = 200;

			var colHeader = { header: column[i], width: width, dataIndex: "" + column[i] };
			arrCol.push(colHeader);
		}
		return arrCol;
	},

	generateGridStore: function(data){
		var rowHeader = data.content[0];
		var gridStore = new Ext.data.ArrayStore({
		  fields: rowHeader,
		  idIndex: 0
		});
	  rows = this.rendererGridRecord(data.content);
		gridStore.loadData(rows);
		return gridStore;
	},

	rendererGridRecord: function(data){
		var RESOURCE_FIELDS = 3;
		var rowHeader = data[0];
		var rows = data.slice(1);
		for(var i = 0; i < rows.length; i++){
			var row = rows[i];
			var lastColumn = row[row.length - 1];
			if(lastColumn.length){
				var errors = [];
				for(var j = 0; j < RESOURCE_FIELDS; j++){
					var error = this.getColumnError(lastColumn, rowHeader[j]);
					if (error){
						errors.push(error);
						row[j] = (row[j])?"<span class='red'> " + row[j]+ "</span>":"";
		  		}
				}
				if(errors.length){
					var errors_msg = errors.join("<br/>");
					row[row.length - 1] = "<span class='red'> " + errors_msg+ "</span>";
				}
			}
		}
		return rows;
	},

	invalidResourcesExist: function(rows){
		for(var i = 0; i < rows.length; i++){
			var row = rows[i];
			if (row[row.length - 1].length) {
		  	return true;
	  	}
	  }
		return false;
	},

	getColumnError: function(lastColumn, headerName){
		for(var i = 0; i < lastColumn.length; i++){
			if(lastColumn[i][0] == headerName)
				return Util.func.firstLetterUpperCase(headerName) + " " + lastColumn[i][1];
		}
		return "";
	},


	getConfirmDataResourcesWindow:function(){
		return Ext.getCmp("confirm_window");
	},

	closeConfirmDataResourcesWindow: function(){
		this.getConfirmDataResourcesWindow().close();
	},

	showConfirmDataResourcesWindow: function(){
		this.getConfirmDataResourcesWindow().show();
	},

	closeUploadIconWindow:function(){
		this.getConfirmDataResourcesWindow().close();
	},

	showLoadingImportWindow: function(){
		this.myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Importing in progess ..."});
		this.myMask.show();
	},

	closeLoadingImportWindow: function(){
		this.myMask.hide();
	}
}
Presenter.ConfirmDataResourcesPresenter = function(view){
	this.view = view;
}

Presenter.ConfirmDataResourcesPresenter.prototype = {

	showConfirmDataResourceWindow: function(data){
		if(data)
		{
			this.view.createConfirmDataResourcesWindow(data);
		}
	},

	confirmImport: function(fileName, layerId){
		var data = {}
		data['fileName'] = fileName;
		data['layerId'] = layerId;
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.CONFIRMED_IMPORT_RESOURCES, data));
	},

	hideConfirmDataResourceWindow: function(){
			this.view.closeConfirmDataResourcesWindow();
	},

	showLoadingImportWindow: function(){
		this.view.showLoadingImportWindow();
	},

	closeLoadingImportWindow: function(){
		this.view.closeLoadingImportWindow();
	}


}
View.FrontLayerView = function(){
	this.element = null;
	this.presenter = new Presenter.FrontLayerPresenter(this);
}

View.FrontLayerView.prototype = {
	createFrontLayerWindow: function(layer){
		var _self = this;
		var frontLayerId= "front_layer";
		var myLayer = Ext.fly("my_layer");
		var height = myLayer.getHeight();

		var myPageSize = 10 ;
		var url = SETTING.WEBROOT + "layers/"+layer.id+"/memberships.json";

		var resourceRecord = Ext.data.Record.create([
				{name: 'id'},
				{name: 'name',type: 'string'}
			]);

			var readerOption = {
				totalProperty: 'total',
				successProperty: 'success',
				idProperty: 'id',
				root: 'rows',
				messageProperty: 'message'
			};

			var reader = new Ext.data.JsonReader(readerOption,resourceRecord);
			var proxy = new Ext.data.HttpProxy({
				method: 'GET',
				api: {
						read : url
					}
			});

			var store = new Ext.data.Store({
				id: 'member_list_store',
				proxy: proxy,
				reader: reader
			});

		var windowResourceList = _self.getFrontLayerCmp(frontLayerId);

			windowResourceList = new Ext.FormPanel({
			id : frontLayerId,
			height: height,
			renderTo: myLayer.dom,
			cls: 'frontLayer',
			layoutConfig:{
				align: "stretch"
			},
			listeners:{
				afterRender:function(){
					Ext.fly("closeFrontLayer").on("click",function(){
						Ext.getCmp("front_layer").destroy(true);
					});
				}
			},
			items:[{
				xtype: 'hidden',
				id: 'frontLayerId',
				value: layer.id
			},
			{
				height: 40,
				layout: "hbox",
				align : "stretch",
				style: "padding: 10px;",
				items:[{
					html: layer.name,
					value: layer.name,
					id: 'frontLayerName',
					cls: 'header_title',
					width: 250
				},
				{
					html: "<a href='javascript:void(0)' id='closeFrontLayer' >  Close </a>",
					flex: 1,
					style: "text-align: right;"
				}]
			},

			{
				xtype:'tabpanel',
				activeTab: 0,
				items: [{
					title: "Member",
					items: [
						{
							xtype: "grid",
							id: 'member_list_grid',
							store: store,
							cls : 'clickable',
							height:350,
							autoScroll:true,
							columns: [
								new Ext.grid.RowNumberer({width : 30,header:"#",renderer:_self.generateRecordNumber}),
								{ header: "NAME",sortable: true,dataIndex: 'name',width:250,renderer:_self.generateResourceName}
							],
							frame:true,
							bbar: new Ext.PagingToolbar({
								store: store,
								displayInfo: true,
								pageSize: myPageSize,
								prependButtons: true
							}),
							listeners: {
								cellclick : function (grid, rowIndex,columnIndex,e ){
									if (columnIndex == 1 && rowIndex>=0){
										window.grid = grid;
										var data = {};
										data['userId'] = grid.store.data.items[rowIndex].data.id ;
										data['layerId'] = Ext.getCmp('frontLayerId').value;
										_self.presenter.editMemberAccessRights(data);
									}
								}
							},
							tbar:[{
								html: "<a href='javascript:void(0);' class='add' > Add Member </a>",
								cls : "toolbar",
								handler :function(){
								  var layerId = Ext.getCmp('frontLayerId').value;
									_self.presenter.showAddNewMember(layerId);
								}
							}]
						}
					]
				}]
			}]
		});
		store.load({params:{start:0, limit:myPageSize}});
	},

	generateRecordNumber: function(v, p, record, rowIndex){
		var member_grid = Ext.getCmp("member_list_grid");
		var store = member_grid.store ;
		try {
			start = parseInt(member_grid.store.reader.jsonData.start);
		}catch(ex){ start = 0};
		p.attr = "ext:qtip='Click on here to edit' ext:qtitle='' ";
		return rowIndex+start+1;
	},

	generateResourceName:function(v, p, record, rowIndex){
		p.attr = "ext:qtip='Click on here to see the detail' ext:qtitle='' ";
		return v;
	},

	getFrontLayerCmp: function(frontLayerId){
		return Ext.getCmp(frontLayerId);
	},

	reloadMemberToGrid: function(data){
		var store = Ext.getCmp('member_list_grid').store;
	  store.reload();
	},

	closeFrontLayerWindow: function(){
		if(Ext.getCmp("front_layer"))
			Ext.getCmp("front_layer").destroy(true);
	}
}
Presenter.FrontLayerPresenter = function(view){
	this.view = view;
}

Presenter.FrontLayerPresenter.prototype = {

	showFrontLayerWindow: function(layer){
			this.view.createFrontLayerWindow(layer);
	},

	showAddNewMember: function(frontLayerId){
		GEvent.dispatchEvent(new Events.MemberEvent(Events.MemberEvent.SHOW_ADD_NEW_MEMBER_WINDOW, frontLayerId));
	},

	handleMemberSaved: function(data){
	  this.view.reloadMemberToGrid(data);
	},

	closeFrontLayerWindow: function(){
		this.view.closeFrontLayerWindow();
	},

	editMemberAccessRights: function(data){
		GEvent.dispatchEvent(new Events.MemberEvent(Events.MemberEvent.EDIT_MEMBER_ACCESS_RIGHTS, data));
	}

}
View.FrontMemberView = function(){
	this.presenter = new Presenter.FrontMemberPresenter(this);
}

View.FrontMemberView.prototype = {
	createMemberWindow: function(layerId){
		var _self = this;
		var wnd = new Ext.Window({
			id :"member_wnd",
			title: 'New member',
			modal: true,
			resizable: true,
			border: false,
			width:450,
			items:[
				{
					id : "flashFrontMember",
					html: "",
				},

				{
					id :"front_member_form",
					xtype: 'form',
					padding: 10,
					labelWidth: 150,
					defaults: {
						labelStyle: 'text-align: right',
						xtype: 'textfield',
						width: 220
					},
					items: [
						{
							xtype: 'hidden',
							id: 'memberLayerId',
							value: layerId,
							name: 'memebership[layer_id]'
						},
						{
							id: 'user_name',
							name: 'user[name]',
							fieldLabel: 'User name ',
							allowBlank: false,
							blankText: "User name can not be empty"
						},
						{
							name: 'user[password]',
							id: 'password',
							fieldLabel: 'Password ',
							inputType: 'password',
							allowBlank: false,
							blankText: "Password can not be empty"
						},
						{
							name: 'password_confirmation',
							id: 'password_confirmation',
							fieldLabel: 'Password Confirmation ',
							inputType: 'password',
							allowBlank: false,
							blankText: "Password confirmation can not be empty"
						},
						{
							name: 'phone_number',
							id: 'phone_number',
							fieldLabel: 'Phone Number ',
							allowBlank: true,
						},
						{
							xtype: 'fieldset',
							id: 'access_rights_fieldset',
							title: 'Membership Access Rights',
							cls: 'fieldset',
							layout: 'anchor',
							hideLabels: true,
							height:65,
							width: 380,
							items: [
								{
									layout: 'hbox',
									defaults: {
										margins: '0 5 0 0'
									},
									items: [
										{
											xtype: 'checkbox',
											id: 'membership_view',
							        fieldLabel: 'Check to apply',
							        value: SETTING.ACCESS_RIGHTS_READ,
							        boxLabel: 'View',
							        name: 'membership_view'
								    }, {
								    	xtype: 'checkbox',
								    	id: 'membership_update',
							        fieldLabel: '',
							        value: SETTING.ACCESS_RIGHTS_UPDATE,
							        labelSeparator: '',
							        boxLabel: 'Update',
							        name: 'membership_update'
								    }, {
								    	xtype: 'checkbox',
								    	id: 'membership_delete',
							        fieldLabel: '',
							        value: SETTING.ACCESS_RIGHTS_DELETE,
							        labelSeparator: '',
							        boxLabel: 'Delete',
							        name: 'membership_delete'
								    }
									]
								}
							]
						}
					]
				}
			],
			listeners: {
				beforeclose: function(){
				}
			},
			buttons: [
				{
					text: 'Create',
					handler: function(){
						var formData = _self.getMemberFormData();
						_self.presenter.saveMember(formData);
					}
				},
				{
					text: 'Cancel',
					handler: function(){
					  _self.closeMemberWindow();
					}
				}
			]
		});

		wnd.show();
	},

	closeMemberWindow: function(){
		Ext.getCmp("member_wnd").close();
	},

	getMemberFormData: function(){
		return Ext.getCmp('front_member_form').getForm().getValues();
	},




	showFlashMsg: function(errs, cls){ //flashFrontMember

		var msg = errs;
	  if(typeof errs =="object"){
	  	msg = errs.join("<br />");
	  }
	  this.setFlashMsg(msg,cls);



	},

	showFlashResponse : function(serverErrs,cls){
			var errors = []
			for(var i=0 ; i<serverErrs.length;i++){

				var field = serverErrs[i][0];
				var err = serverErrs[i][1];
				var errorMsg = field.substr(0,1).toUpperCase()+field.substr(1) + "  " + err;
				errors.push(errorMsg);

			}
			this.showFlashMsg(errors,cls);

	},

	removeFlashMsg: function(){
		Ext.fly("flashFrontMember").hide();
	},

	setFlashMsg: function(msg,cls){
		Ext.fly("flashFrontMember").update(msg);
		Ext.fly("flashFrontMember").addClass(cls);
		Ext.fly("flashFrontMember").show();
		Ext.getCmp("member_wnd").doLayout();
	},

	showEditMemberWindow: function(data){
		var _self = this;
		var wnd = new Ext.Window({
			id :"edit_member_wnd",
			title: 'Edit member',
			modal: true,
			resizable: true,
			border: false,
			width:450,
			items:[
				{
					id : "flashFrontMember",
					html: "",
				},

				{
					id :"front_edit_member_form",
					xtype: 'form',
					padding: 10,
					labelWidth: 150,
					defaults: {
						labelStyle: 'text-align: right',
						xtype: 'textfield',
						width: 220
					},
					items: [
						{
							xtype: 'hidden',
							id: 'membershipId',
							value: data.id,
							name: 'memebership[id]'
						},
						{
							id: 'user_name',
							xtype: 'panel',
							height: 25,
							html: "User : " + data.user['name']
						},
						{
							xtype: 'fieldset',
							id: 'access_rights_fieldset',
							title: 'Membership Access Rights',
							cls: 'fieldset',
							layout: 'anchor',
							hideLabels: true,
							height:65,
							width: 380,
							items: [
								{
									layout: 'hbox',
									defaults: {
										margins: '0 5 0 0'
									},
									items: [
										{
											xtype: 'checkbox',
											id: 'membership_view',
							        fieldLabel: 'Check to apply',
							        value: SETTING.ACCESS_RIGHTS_READ,
							        boxLabel: 'View',
							        name: 'membership_view',
							        checked: _self.isChecked(SETTING.ACCESS_RIGHTS_READ, data.access_rights)
								    }, {
								    	xtype: 'checkbox',
								    	id: 'membership_update',
							        fieldLabel: '',
							        value: SETTING.ACCESS_RIGHTS_UPDATE,
							        labelSeparator: '',
							        boxLabel: 'Update',
							        name: 'membership_update',
							        checked: _self.isChecked(SETTING.ACCESS_RIGHTS_UPDATE, data.access_rights)
								    }, {
								    	xtype: 'checkbox',
								    	id: 'membership_delete',
							        fieldLabel: '',
							        value: SETTING.ACCESS_RIGHTS_DELETE,
							        labelSeparator: '',
							        boxLabel: 'Delete',
							        name: 'membership_delete',
							        checked: _self.isChecked(SETTING.ACCESS_RIGHTS_DELETE, data.access_rights)
								    }
									]
								}
							]
						}
					]
				}
			],
			listeners: {
				afterRender: function(){

				},
				beforeclose: function(){

				}
			},
			buttons: [
				{
					text: 'Update',
					handler: function(){
						var formData = _self.getEditMemberFormData();
						_self.presenter.updateMember(formData);
					}
				},
				{
					text: 'Cancel',
					handler: function(){
					  _self.closeEditMemberWindow();
					}
				}
			]
		});

		wnd.show();
	},

	isChecked: function(x, y){
		return x & y;
	},

	closeEditMemberWindow: function(){
		Ext.getCmp('edit_member_wnd').close();
	},

	getEditMemberFormData: function(){
		return Ext.getCmp('front_edit_member_form').getForm().getValues();
	},

	showUpdatedError: function(){
		Ext.getCmp("flashFrontMember").el.update("<div class='error'> Process update access rights failed</div>");
	}

}
Presenter.FrontMemberPresenter = function(view){
	this.view = view;
}

Presenter.FrontMemberPresenter.prototype = {

	showMemberWindow: function(layerId){
			this.view.createMemberWindow(layerId);
	},

	saveMember: function(data){

			var memberName = data['user[name]'];
			var password = data['user[password]'];
			var confPassword = data['password_confirmation'];
			var phoneNumber = data['phone_number'];

			var errs = [];
			var access_rights = 0;

			if(data['membership_view'])
				access_rights = access_rights + parseInt(Ext.getCmp('membership_view').value);
			if(data['membership_update'])
				access_rights = access_rights + parseInt(Ext.getCmp('membership_update').value);
			if(data['membership_delete'])
				access_rights = access_rights + parseInt(Ext.getCmp('membership_delete').value);

			if(memberName == '')
				errs.push("Name can't be blank");
			if(password == '')
				errs.push("Password can't be blank");
			if(password != confPassword)
				errs.push("Password not matched");
			if(access_rights == 0)
				errs.push("Please give access rights to member");
			if(errs.length){
				this.view.showFlashMsg(errs, "error");
				return ;
			}

			this.view.removeFlashMsg();

			var params = {};
			params['name'] = memberName;
			params['password'] = password;
			params['layer_id'] = data['memebership[layer_id]'];
			params['phone_number'] = phoneNumber;
			params['access_rights'] = access_rights;
			GEvent.dispatchEvent(new Events.MemberEvent(Events.MemberEvent.SAVE_MEMBER, params));
	},

	showMemberCreatedFailed: function(errs){
		this.view.showFlashResponse(errs,"error");
	},

	closeMemberWindow: function(){
		this.view.closeMemberWindow();
	},

	showEditMemberWindow: function(data){
		this.view.showEditMemberWindow(data);
	},

	updateMember: function(data){
		var errs = [];
		var access_rights = 0;
		var membership_id = data['memebership[id]'];
		if(data['membership_view'])
			access_rights = access_rights + parseInt(Ext.getCmp('membership_view').value);
		if(data['membership_update'])
			access_rights = access_rights + parseInt(Ext.getCmp('membership_update').value);
		if(data['membership_delete'])
			access_rights = access_rights + parseInt(Ext.getCmp('membership_delete').value);
		if(errs.length){
			this.view.showFlashMsg(errs,"error");
			return ;
		}
		var params = {};
		params['id'] = membership_id;
		params['access_rights'] = access_rights;
		GEvent.dispatchEvent(new Events.MemberEvent(Events.MemberEvent.UPDATE_MEMBER, params));
	},

	showUpdatedError: function(){
		this.view.showUpdatedError();
	},

	closeEditMemberWindow: function(){
		this.view.closeEditMemberWindow();
	}

}
Events.MapsEvent = function(type,data){
	this.type = type;
	this.data = data ;
}

Events.MapsEvent.MAPS_MARKER_REMOVE= "mapRemoveDraggableMarker";
Events.MapsEvent.MAPS_MARKER_SHOW_DRAGGABLE = "mapShowDraggableMarker";
Events.MapsEvent.MAPS_MARKER_UNDRAGGABLE = "mapUnDraggableMarker";
Events.MapsEvent.MAPS_MARKER_DRAGGABLE_RESET = "mapMarkerDraggleReset";
Events.ResourcesEvent.MAPS_MARKER_HIDE_DRAGGABLE = "mapMarkerDraggableHide";
Events.MapsEvent.VIEW_SHOW = "viewShowMapEvent";
Events.MapsEvent.MARKER_STATUS = "markerStatusEvent";
Events.MapsEvent.SET_CENTER = "mapCenterEvent";
Events.MapsEvent.SET_CENTER = "mapCenterEvent";
Events.MapsEvent.SET_POSITION_DRAGGABLE_MARKER = "mapSetPostionDraggableMarker";
Events.MapsEvent.LOADING_WINDOW_SHOW = "mapLoadingWindowShow";
Events.MapsEvent.LOADING_WINDOW_CLOSE = "mapLoadingWindowClose";

Events.MemberEvent = function(type,data){
	this.type = type;
	this.data = data ;
}

Events.MemberEvent.SHOW_ADD_NEW_MEMBER_WINDOW = 'showAddNewMemberWindowEvents';
Events.MemberEvent.SAVE_MEMBER = 'saveMemberEvents';
Events.MemberEvent.MEMBER_CREATED = "memberCreatedMemberEvents" ;
Events.MemberEvent.MEMBER_CREATED_FAILED = "memberCreatedFailedMemberEvents" ;
Events.MemberEvent.EDIT_MEMBER_ACCESS_RIGHTS = "memberEditAccessRightsEvents";
Events.MemberEvent.UPDATE_MEMBER = "memberUpdateEvents";
Events.MemberEvent.MEMBER_GET_UPDATED = "memberGetUpdatedEvents";
Events.MemberEvent.MEMBER_GET_UPDATED_FAILED = "memberGetUpdatedFailedEvents";
Events.MemberEvent.GET_MEMBER_SUCCESS = "memberGetMemberSuccessEvents";

Events.UtilitiesEvent = function(type,data){
	this.type = type;
	this.data = data;
};

Events.UtilitiesEvent.VIEW_HIDE_ALL = 'viewHideAllUtilitiesEvent';
Events.UtilitiesEvent.VIEW_SWITCHER = 'viewSwitcherUtilitiesEvent';
Events.UtilitiesEvent.UPLOAD_ICON = 'viewUploadIconUtilitiesEvent';
Events.UtilitiesEvent.IMPORT_RESOURCES = 'viewImportResourceUtilitiesEvent';


/**
 * @author iLab js lib
 */
function waterMark(){
	var water_mark = Ext.select(".waterMark");
	Ext.each(water_mark.elements, function(elm){
	    var waterMarkText = elm.value;
		Ext.get(elm).on("blur",function(){
			if(this.dom.value == '') {
		      this.dom.value = waterMarkText;
		    }
		    if(this.dom.value == waterMarkText) {
		      this.addClass('waterMark');
		    }
		}).on("focus",function(){
			this.removeClass('waterMark');
		    if(this.dom.value == waterMarkText){
		      this.dom.value = "";
	    }
		});
	});
}

function waterMarkById(id){
	var water_mark = Ext.getCmp(id);
	if(water_mark){
		var waterMarkText = water_mark.value;
		water_mark.el.on("blur", function(){
			if (this.dom.value == '') {
				this.dom.value = waterMarkText;
			}
			if (this.dom.value == waterMarkText) {
				this.addClass('waterMark');
			}
		}).on("focus", function(){
			this.removeClass('waterMark');
			if (this.dom.value == waterMarkText) {
				this.dom.value = "";
			}
		});
	}
}
View.MyLayerView = function(){
	this.presenter = new Presenter.MyLayerPresenter(this);
	this.layerRecord = Ext.data.Record.create([	{name: "id"}, {name: "name"}, {name: "icon"} ]);
	this.presenter.initialize();
	var _myLayerView = this;
};

View.MyLayerView.prototype = {
	createMyLayer: function(){
		var _self = this;
		var _myLayerView = this;
		new Ext.FormPanel({
			id: "my_layer",
			style:"background-color:#fff;",
			renderTo:document.body,
			autoScroll:true,
			layout: 'hbox',
			items: [
				{
					html: '<h2 > My Layers </h2>',
					cls: 'myLayersTitle'
				},
				{
					html: " ",
					id: 'importResourceStatus'
				},
				{
					xtype: 'grid',
					id: 'my_layers_grid',
					frame: true,
					width: 800,
					height:500,
					autoScroll: true,
					store: {
						xtype: 'jsonstore',
						fields: ['id', 'name' ,'icon', 'description', 'is_public', '']
					},
					viewConfig: { autoFill: true },
					columns: [
								{ header: 'Icon', dataIndex: 'icon',width:70, mapping: 'icon', renderer:_myLayerView.generateIcon},
								{ header: 'Layers', dataIndex: 'name', mapping: 'name', renderer:_myLayerView.generateLink},
								{ header: 'Description', dataIndex: 'description' },
								{ header: 'Public', width: 40, dataIndex: 'is_public',renderer:_myLayerView.generateCheckBox},
								{ header: 'Template', renderer: _myLayerView.generateTemplate},
								{ header: 'Import CSV', renderer: _myLayerView.generateImportCSV}
					],
					listeners: {
						afterRender: function(){
							_myLayerView.presenter.loadMyLayer();
						},
						cellclick : function (grid, rowIndex,columnIndex,e ){
								if( columnIndex == 0 && rowIndex>=0 ){
									var id = grid.store.data.items[rowIndex].data.id ;
									var layer_name = grid.store.data.items[rowIndex].data.name ;
									_myLayerView.presenter.displayUploadIconWindow(id,layer_name);
								}

								if( columnIndex == 5 && rowIndex>=0 ){
									var id = grid.store.data.items[rowIndex].data.id ;
									var layer_name = grid.store.data.items[rowIndex].data.name ;
									var data = {};
									data['id'] = id;
									data['layer_name'] = layer_name;
									_myLayerView.presenter.displayImportResourcesWindows(data);
								}

								if (columnIndex == 4 && rowIndex>=0){
									var id = grid.store.data.items[rowIndex].data.id ;
									var url = SETTING.WEBROOT + "layers/" + id + "/property_templates.csv";
									window.location.href =url;
								}

								if (columnIndex == 1 && rowIndex>=0){
									var layerId = grid.store.data.items[rowIndex].data.id ;
									_myLayerView.presenter.showFrontLayer(layerId);
								}

						}
					},
					tbar:[{
						html: "<a href='javascript:void(0);' class='add' > Add Layer </a>",
						cls : "toolbar",
						handler :function(){
							_myLayerView.presenter.showNewLayerWindow();
						}
					}],
					bbar:[
						{
							html:"",
							id: "sbMyLayerStatus"
						}
					],
					buttons:[{
						text: "<span id='buttonUpdate' class='update'>Update</span>",
						handler :function(){
							var cbStatus = Ext.query("input[name=public_status]");
							_self.showUpdateProcess();
							if(cbStatus){
								var status = {"layer":{}};
								for(var i=0;i<cbStatus.length;i++){
									status["layer"][cbStatus[i].value] = (cbStatus[i].checked)?1:0;
								}
								var data = Json.encode(status);
								_myLayerView.presenter.updateLayerStatus(data);
							}
						}
					}]
				}
			],
			listeners:{
				afterRender:function(){
					_myLayerView.drawMyLayerOverLay();
				}
			}
		});
	},

	generateLink: function (nam,row,col){
		var layer_id = col.data.id;
		var layer_name = col.data.name;

		var str =  "<a href='javascript:void(0);'  class='nameMyLayer'  > ";
		str += layer_name ;
		str += "</a>";
		return str;
	},


	generateIcon: function(icon,row,col){

		var layer_id = col.data.id ;
		var icon = (!icon)? SETTING.MARKER_ICON_DEFAULT:icon;
		var str =  "<a  class='iconMyLayer noUnderline' href='javascript:void(0);' > ";
		if(!icon)
			icon = SETTING.MARKER_ICON_DEFAULT ;
		str +=  "<img src='"+ SETTING.MARKER_ICON_PATH + icon + "' /> ";
		str += "<br />";
		str += "Change icon </a>";
		return str;
	},

	generateCheckBox: function(isPublic, metaData, record, rowIndex, colIndex, store){
		var layerId = record.data.id;
		var state="";
		if(isPublic)
			state = "checked";
		var str =  "<input type='checkbox' id ='myLayerCheckboxGrid_"+layerId+"' value='"+layerId+"' name='public_status' class='my_layer_check' " + state + " /> ";
		str +=  "<input type='checkbox' id ='myLayerCheckboxGridHide_"+layerId+"' value='"+layerId+"' name='public_status_hide' style='display:none;' " + state + " /> ";
		return str;
	},

	drawMyLayerOverLay:function(){
		var w =	Ext.fly("region_center").getWidth();
		var h = Ext.fly("region_center").getHeight();
		var top = Ext.fly("region_center").dom.style.top;

		Ext.fly("my_layer").dom.style.top = 50 +"px";
		Ext.fly("my_layer").dom.style.position ="absolute";
		Ext.getCmp("my_layer").setWidth(w);
		Ext.getCmp("my_layer").setHeight(h);


	},

	addItem: function(layer){
		Ext.getCmp('my_layers_grid').getStore().add(new this.layerRecord(layer));
	},

	clear: function(){
		Ext.getCmp('my_layers_grid').getStore().removeAll();
	},

	createUploadWindow: function(id, layer_name){
		_myLayerView = this ;
		if(!_myLayerView.getUploadIconWindow()){
			new Ext.Window({
				id: "upload_icon_window",
				title: "Upload icon",
				renderTo: 'my_layer',
				closable: true,
				draggable: true,
				width:400,
				zIndex :30000,
				modal: true,
				autoHeight:true,
				listeners:{
				  	close: function(){
				  		try{
				  		window.SETTING.swfUpload =null;
				  	}
				  	  catch(ex){}
				  	}
				},
				items:[
					{
					xtype:"panel",
					cls:'paragraph_msg',
					autoHeight:true,
					items:[
						  {
								id: "upload_icon_layer_title",
								html : "Upload image",
								frame: true
						  },
						  {
								id: "swf_container",
								html : _myLayerView.swfContainer(),
								frame: false,
								listeners:{
									afterRender:function(){
										Ext.fly("upload_button").on("click",function(){
											_myLayerView.presenter.startUploadIcon(SETTING.swfUpload);
										});
									}
								}
							}
						]
					}
				]
			});
		}
	},

	createFlashUploadObj:function(layer_id){
		var _myLayerView = this;
		var settings = {
			flash_url : window.SETTING.WEBROOT + "javascripts/lib/swfupload/Flash/swfupload.swf",
			upload_url: window.SETTING.UPLOAD_ICON,
			post_params: {"auth_token" : Authentication.getAuthToken(),"layer_id":layer_id},
			file_size_limit : "500 KB",
			file_types : "*.png;*.jpeg;*.gif;*.jpg;*.ico",
			file_types_description : "All Files",
			file_upload_limit : 100,
			file_queue_limit : 100,

			custom_settings : {
				progressTarget : "fsUploadProgress",
				cancelButtonId : "btnCancel"
			},

			button_image_url: SETTING.WEBROOT + "images/upload.png",
			button_width: "100",
			button_height: "30",
			button_text : "Choose File " ,
			button_placeholder_id: "spanButtonPlaceHolder",
			button_text_style: ".theFont { font-size:28px; } ",
			button_text_left_padding: 12,
			button_text_top_padding: 3,
			button_cursor : SWFUpload.CURSOR.HAND,
			button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE,

			file_queued_handler : _myLayerView.fileQueued,
			file_queue_error_handler :_myLayerView._fileQueueError,

			upload_start_handler : _myLayerView.uploadStart,
			upload_progress_handler :_myLayerView.uploadProgress,
			upload_error_handler : _myLayerView.uploadError,
			upload_success_handler : _myLayerView.uploadSuccess
		};
		window.SETTING.swfUpload = new SWFUpload(settings);
		SETTING.swfUpload.addSetting();
	},

	generateUploadLabel: function(layer_name){
		var str = "<div> Upload image for using as icon <span class='highText'> " + layer_name +"</span>  </div>" ;
		str += "<div> Maximum size <span class='highText'> " + SETTING.swfUpload.settings.file_size_limit+ "</span>  </div><br />";
		Ext.fly("upload_icon_layer_title").update(str);
	},

	showUploadIconWindow: function(){
		this.getUploadIconWindow().show();
	},

	hideUploadIconWindow: function(){
		this.getUploadIconWindow().hide();
	},

	getUploadIconWindow:function(){
		return Ext.getCmp("upload_icon_window");
	},

	swfContainer:function(){
		str ='<div class="fieldset flash" id="fsUploadProgress"> <span class="legend"> </span></div>';
		str += "<div id='status'>";
		str +=		"<div id='progress_wrapper'> ";
		str +=			"<div id='progress'> </div>";
		str +=		"</div>";
		str +=			"<div id='percentage'> 0% </div>";
		str +=	"</div>";

		str += "<div class='clear'> </div>";
		str += "<div id='fileUpload' class='fileUpload'> Please select a file to upload </div> ";
		str +="<div class='clear'></div>";
		str += '<div style="float:right;" >' ;
		str +=		'<span id="spanButtonPlaceHolder"> </span>';
		str +=		'<a href ="javascript:void(0)" name="Upload" id="upload_button" class="upload_button" > <span> Upload </span> </a>';
		str += '</div> ';
		return str;
	},

	hide: function(){
		Ext.getCmp("my_layer").hide();
	},
	show: function(){
		Ext.getCmp("my_layer").show();
	},

	closeUploadIconWindow:function(){
		window.SETTING.swfUpload = null;
		Ext.getCmp("upload_icon_window").close();
	},



	fileQueued:function(file){
		SETTING.swfUpload.QueueFile = file;
		var propertyFile = '<span class="fname">' + file.name + '</span>';
		propertyFile += ' : <span class="fsize">(' + file.size + 'Bytes) </span>';
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileFail','fileUpload');
	},

	fileQueueError:function(file, error_code, message){
		var propertyFile = '<div><span class="fname">' + file.name + '</span>';
		propertyFile += ' : <span class="fsize">(' + file.size + ' Bytes)</span></div>';
		propertyFile += '<div> ' + message + "</div>";
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
		SETTING.swfUpload.QueueFile = null;
	},

	uploadStart:function(file){
		Ext.fly("status").setStyle({"visibility":"visible"});
	},

	uploadProgress:function(file, byteComplete, totalBytes){
		var percentage = 100*(byteComplete/totalBytes);
		percentage = (parseInt(percentage*100))/100;
		var width = (byteComplete/totalBytes) * 180;
		Ext.fly("progress").setStyle({"width":width+"px"});
		Ext.fly("percentage").update(percentage+"% ");
	},

	uploadError:function(file, code, httpErrorCode){
		try{
			var propertyFile = '<div><span class="fname">' + file.name + '</span>';
			propertyFile += ' : <span class="fsize">(' + file.size + ' Bytes)</span></div>';
			propertyFile += '<div> Http status : <b> ' + httpErrorCode + "</b></div>";
			propertyFile += '<div> <b> Please try again later </b></div>';
			Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
		}
		catch(Ex){
		}
		SETTING.swfUpload.QueueFile = null;
		Ext.fly("status").setStyle({"visibility":"hidden"});
	},

  uploadSuccess:function(file, responseText){
		if(responseText == SETTING.swfUpload.QueueFile.size){
			_myLayerView.presenter.iconUploaded();
			_myLayerView._uploadSuccess();
		}

	},

	_uploadSuccess:function(file, responseText, response){
			Ext.fly("status").setStyle({"visibility":"hidden"});
			Ext.getCmp("upload_icon_window").close();
	},

	showUploadFileNullError: function(){
		var propertyFile = '<div> ' + 'Please select file to upload' + "</div>";
		Ext.fly('fileUpload').update(propertyFile).replaceClass('fileUpload','fileFail');
	},

	showNewLayerWindow: function(){
		var _self = this;
		var width = 300;
		var windId = "new_layer_window" ;
		var newLayerWindow = new Ext.Window({
			id:windId,
			modal: true,
			renderTo: 'my_layer',
			width:450,
			title: "New Layer",
			items:[{
				xtype: 'form',
				layout: 'form',
				align: 'right',
				id: "new_layer_form",
				bodyStyle: 'padding: 5px',
				items: [
					{
						xtype: "panel",
						id: "add_new_layer_error_msg",
						cls: "error_msg",
						html: ""
					},
					{
						xtype: 'textfield',
						name: 'layer[name]',
						id: "layer_new",
						emptyText: '',
						width: width,
						enableKeyEvents:true,
						fieldLabel: 'Name<span class="require">*</span>',
						listeners: {
						}
					},
					{
						xtype: 'textarea',
						name: 'layer[description]',
						id: "layer_description",
						emptyText: '',
						width: width,
						enableKeyEvents:true,
						fieldLabel: 'Description',
						listeners: {
						}
					},
					{
						xtype: 'checkbox',
						name: 'layer[is_public]',
						id: "layer_public",
						value: 1,
						emptyText: '',
						width: width,
						enableKeyEvents:true,
						fieldLabel: 'Allow to public',
						listeners: {
						}
					}
				]
			}],
			buttons: [
				{
					text: 'Save',
					handler: function(){
						var dataForm = Ext.getCmp('new_layer_form').getForm().getValues();
						dataForm["layer[is_public]"] = (Ext.get("layer_public").dom.checked)?1:0;
						_self.hideErrorMessage();
						_self.presenter.createLayer(dataForm);
					}
				}
			]
		});
		newLayerWindow.show();
	},

	showErrorMessage: function(errors){
		var errorsMessages = [];
		for(var i=0;i<errors.length;i++){
			var fieldName = errors[i][0];
			var firstLetter = fieldName.substr(0,1);
			var subStr = fieldName.substr(1);
			var errField = firstLetter.toUpperCase() + subStr ;
			errorsMessages.push(errField + " : " + errors[i][1]);
		}
		var errorStr = errorsMessages.join("<br />");
		Ext.fly("add_new_layer_error_msg").update(errorStr).show();
	},

	hideErrorMessage: function(){
		try{
		Ext.fly("add_new_layer_error_msg").hide();
		}catch(ex){
			alert(ex.toString())
		}
	},

	closeAddNewLayerWindow: function(){
		Ext.getCmp('new_layer_window').close();
	},

	showMyLayerStatusSaved: function(){
		Ext.getCmp("sbMyLayerStatus").el.update("<div class='success'> Layer status have been saved successfully</div>");
	},

	showMyLayerStatusSavedFailed: function(data){
		Ext.getCmp("sbMyLayerStatus").el.update("<div class='error'> Layer status could not be updated </div>");
		for(layerId in data){
			Ext.get("myLayerCheckboxGrid_"+layerId).dom.checked = Ext.get("myLayerCheckboxGridHide_"+layerId).dom.checked
		}
	},

	showUpdateProcess: function(){
		Ext.getCmp("sbMyLayerStatus").el.update("<div class='div_progress' > Update in progress </div>");
	},

	generateTemplate: function(name, row, col){
		var action_link = "<a href='javascript:void(0);' class='my-layer-grid-action' >download template</a>" ;
		return action_link;
	},

	generateImportCSV: function(name, row, col){
		var action_link = "<a href='javascript:void(0)' class='my-layer-grid-action'>import csv</a>";
		return action_link;
	},

	showImportSuccessMessage: function(){
		Ext.getCmp("importResourceStatus").el.update("<div class='import-success'> Data is imported successfully</div>");
		Ext.getCmp("importResourceStatus").el.fadeIn({endOpacity: 0,duration: 0.5});
		Ext.getCmp('importResourceStatus').el.fadeOut({
		  endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
		  easing: 'easeOut',
		  duration: 15,
		  remove: false,
		  useDisplay: false
		});
	}
};
Presenter.MyLayerPresenter = function(view){
	this.view = view;
	_this = this;
	this.loaded = false;

};

Presenter.MyLayerPresenter.prototype ={
	initialize:function(){
		this.view.createMyLayer();
	},

	loadMyLayer: function(){
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MYLAYER_LOAD));
		this.loaded = true;
	},

	populate: function(layers){
		this.view.clear();
		for(var i=0; i<layers.length; i++){
			this.view.addItem(layers[i]);
		}
	},

	displayUploadIconWindow: function(id, layer_name){
		this.view.createUploadWindow();
		this.view.createFlashUploadObj(id);
		this.view.generateUploadLabel(layer_name);
		this.view.showUploadIconWindow();
	},

	hideView: function(){
		this.view.hide();
	},

	showView: function(){
		if(this.loaded ==false)
			this.loadMyLayer();
		this.view.show();
	},

	startUploadIcon: function(swf){
		if(!swf.QueueFile ){
			this.view.showUploadFileNullError();
			return;
		}
		GEvent.dispatchEvent(new Events.UtilitiesEvent(Events.UtilitiesEvent.UPLOAD_ICON,swf))
	},

	showNewLayerWindow: function(){
		this.view.showNewLayerWindow();
	},

	createLayer: function(data){
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.CREATE_MY_LAYER,data))
	},

	addNewLayerToMyLayerGrid: function(layer){
		this.view.addItem(layer);
		this.view.closeAddNewLayerWindow();
	},

	showAddNewLayerError: function(errors){
		this.view.showErrorMessage(errors);
	},

	updateLayerStatus: function(statusList){
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.UPDATE_MY_LAYER_STATUS,statusList));
	},

	showMyLayerStatusSaved: function(){
		this.view.showMyLayerStatusSaved();
	},

	showMyLayerStatusSavedFailed: function(data){
		this.view.showMyLayerStatusSavedFailed(data);
	},

	displayImportResourcesWindows: function(data){
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.SHOW_IMPORT_RESOURCES,data));
	},

  iconUploaded: function(){
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.MYLAYER_LOAD));
		GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.LAYERS_LOAD));
		GEvent.dispatchEvent(new Events.ResourcesEvent(Events.ResourcesEvent.RESOURCE_LOAD));
	},

	reloadData: function(){
		this.loaded = false;
	},

	showImportMessageStatus: function(){
		this.view.showImportSuccessMessage();
	},

	showFrontLayer: function(layerId){
		  GEvent.dispatchEvent(new Events.LayersEvent(Events.LayersEvent.SHOW_FRONT_LAYER_EVENT, layerId));
	},

};
org.instedd.ResourceMap.Home = function(){

}

org.instedd.ResourceMap.Home.prototype = {
	init: function(){
		this.authenticate();
		var view = new View.HomeView();

		GEvent.dispatchEvent(new Events.SystemEvent(Events.SystemEvent.PREINITIALIZE));
		new Controller.HomeController(view.presenter);
		GEvent.dispatchEvent(new Events.SystemEvent(Events.SystemEvent.INITIALIZE));
	},

	authenticate: function()
	{
		if(Authentication.verify()){
			AjaxRequest.authenticate(Authentication.getAuthToken());
		}
	}
}
Controller.HomeController = function(presenter){
	var _self = this;
	this.presenter = presenter;
	this.layerManager = Model.Factory.create('LayerManager');
	this.resourceManager = Model.Factory.create('ResourceManager');
	this.authManager = Model.Factory.create('AuthenticationManager');
	this.templateManager = Model.Factory.create('TemplateManager');
	this.uploadManager = Model.Factory.create('UploadManager');

	GEvent.addEventListener(Events.SystemEvent.INITIALIZE, function(e){
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCES_CHANGED, function(e){
		_self.presenter.children.mapPresenter.populate(_self.resourceManager.resources);
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_LOAD, function(e){
	  if(Authentication.verify()){
	    _self.layerManager.getLayers(Authentication.getCurrentUser());
	  } else {
	    _self.layerManager.getPublicLayers();
	  }
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_CHANGED, function(e){
		_self.presenter.children.layerWindowPresenter.populateLayers(_self.layerManager.layers);
	});

	GEvent.addEventListener(Events.AuthenticationEvent.USER_LOGIN, function(e){
		_self.authManager.login(e.data);
	});

	GEvent.addEventListener(Events.AuthenticationEvent.LOGIN_SUCCESS, function(e){
		Authentication.saveSession(_self.authManager.session);
		_self.presenter.loginSuccess();
	});

	GEvent.addEventListener(Events.AuthenticationEvent.LOGIN_FAILED, function(e){
		_self.presenter.loginFailed();
	});

	GEvent.addEventListener(Events.MapsEvent.MAPS_MARKER_REMOVE, function(e){
		_self.presenter.children.mapPresenter.removeDraggableMarker();
	});

	GEvent.addEventListener(Events.MapsEvent.MAPS_MARKER_SHOW_DRAGGABLE, function(e){
		_self.presenter.children.mapPresenter.showDraggableMarker(e.data);
	});

	GEvent.addEventListener(Events.MapsEvent.MAPS_MARKER_UNDRAGGABLE, function(e){
		_self.presenter.children.mapPresenter.setMarkerDraggability(false);
	});


	GEvent.addEventListener(Events.MapsEvent.MAPS_MARKER_DRAGGABLE_RESET, function(e){
		layers = _self.layerManager.layers;
		resource = e.data;
		_self.presenter.children.mapPresenter.updateResourceMarker(resource,layers);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCES_SAVE, function(e){
		_self.resourceManager.createResource(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_ADDED, function(e){
		_self.presenter.children.layerWindowPresenter.updateForm(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_GET_DETAIL, function(e){
		_self.presenter.children.layerWindowPresenter.renderResourceDetail(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_REQUEST_GET_DETAIL, function(e){
		_self.resourceManager.getResourceDetail(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_LOAD, function(e){
		_self.resourceManager.loadResources();
	});

	GEvent.addEventListener(Events.LayersEvent.MYLAYER_LOAD, function(e){
		_self.layerManager.loadMyLayer();
	});

	GEvent.addEventListener(Events.LayersEvent.MYLAYERS_CHANGED, function(e){
		_self.presenter.getMyLayerPresenter().populate(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.MYLAYERS_HIDE, function(e){
		_self.presenter.getMyLayerPresenter().hideMyLayer();
	});

	GEvent.addEventListener(Events.UtilitiesEvent.VIEW_HIDE_ALL, function(e){
		_self.presenter.hideAll();
	});

	GEvent.addEventListener(Events.LayersEvent.MYLAYERS_SHOW, function(e){
		_self.presenter.getMyLayerPresenter().showView();
	});

	GEvent.addEventListener(Events.MapsEvent.VIEW_SHOW , function(e){
		_self.presenter.getMapPresenter().showView();
	});

	GEvent.addEventListener(Events.TemplatesEvent.TEMPLATES_LOAD, function(e){
		_self.templateManager.loadTemplates(e.data);
	});

	GEvent.addEventListener(Events.TemplatesEvent.TEMPLATES_CHANGED, function(e){
		_self.presenter.children.layerWindowPresenter.populateTemplates(_self.templateManager.templates);
	});

	GEvent.addEventListener(Events.UtilitiesEvent.UPLOAD_ICON, function(e){
		_self.uploadManager.startUploadIcon(e.data);
	});

	this.presenter.initialize();

	GEvent.addEventListener(Events.MapsEvent.MARKER_STATUS, function(e){
		_self.presenter.getMapPresenter().setMarkerStatus();
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCES_LOAD_TEMPLATE, function(e){
		_self.resourceManager.getResourceTemplate(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_GET_TEMPLATE, function(e){
		_self.presenter.children.layerWindowPresenter.showResourcesListWindow(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_LOAD_DETAIL_FOR_RESOURCE_LIST, function(e){
		_self.resourceManager.getResourceDetailForResourceList(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_GET_DETAIL_FOR_RESOURCE_LIST, function(e){
		var resource = e.data;
		_self.presenter.children.mapPresenter.moveToPoint(resource);
		_self.presenter.children.layerWindowPresenter.renderResourceDetail(resource);
	});

	GEvent.addEventListener(Events.AuthenticationEvent.USER_LOGOUT, function(e){
		_self.authManager.logout();
	});

	GEvent.addEventListener(Events.LayersEvent.CREATE_MY_LAYER, function(e){
		_self.layerManager.createMyLayer(e.data);
	});

	GEvent.addEventListener(Events.AuthenticationEvent.LOGOUT_SUCCESS, function(e){
		Authentication.reset();
		_self.presenter.getFrontLayerPresenter().closeFrontLayerWindow();
		_self.presenter.getMyLayerPresenter().reloadData();
		_self.presenter.logoutSuccess();
	});

	GEvent.addEventListener(Events.LayersEvent.MY_LAYER_ADDED, function(e){
		var layers = _self.layerManager.layers;
		_self.presenter.children.layerWindowPresenter.populateLayers(layers);
		_self.presenter.getMyLayerPresenter().addNewLayerToMyLayerGrid(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.MY_LAYER_ADDED_FAILED, function(e){
		_self.presenter.getMyLayerPresenter().showAddNewLayerError(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.UPDATE_MY_LAYER_STATUS, function(e){
		_self.layerManager.updateMyLayerStatus(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED, function(e){
		_self.presenter.getMyLayerPresenter().showMyLayerStatusSaved();
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_MY_LAYER_STATUS_SAVED_FAILED, function(e){
		_self.presenter.getMyLayerPresenter().showMyLayerStatusSavedFailed(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_UPDATE_RESOURCE_LOCATION_DRAGGING, function(e){
		_self.presenter.children.layerWindowPresenter.updateResourceLatLngDragging(e.data);
	});

	GEvent.addEventListener(Events.LayersEvent.LAYERS_LOAD_COMPLETED, function(e){
		var queryString = "layers=";
		for(var i = 0; i < _self.layerManager.layers.length; i++){
			queryString += _self.layerManager.layers[i].name + ","
		}
		_self.resourceManager.loadResourcesOf(queryString);
	});

	GEvent.addEventListener(Events.ResourcesEvent.SHOW_IMPORT_RESOURCES, function(e){
		_self.presenter.getImportResourcePresenter().showImportResourceWindow(e.data);
	});

	GEvent.addEventListener(Events.UtilitiesEvent.IMPORT_RESOURCES, function(e){
		_self.uploadManager.startImportResources(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.LOAD_CONFIRMED_RESOURCES, function(e){
		_self.presenter.getConfirmDataResourcesPresenter().showConfirmDataResourceWindow(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.CONFIRMED_IMPORT_RESOURCES, function(e){
		_self.resourceManager.confirmImport(e.data.fileName, e.data.layerId);
	});

	GEvent.addEventListener(Events.ResourcesEvent.IMPORT_RESOURCES_FROM_CSV_SUCCESS, function(e){
		_self.presenter.getMapPresenter().fitBounds();
		_self.presenter.getConfirmDataResourcesPresenter().hideConfirmDataResourceWindow();
		_self.presenter.getMyLayerPresenter().showImportMessageStatus();
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_ITEM_ADDED, function(e){
		_self.presenter.getMapPresenter().generateMarkerItem(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_EDIT, function(e){
		_self.resourceManager.editResource(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCE_EDIT_SUCCESS, function(e){
		_self.presenter.children.layerWindowPresenter.renderEditResourceForm(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCES_UPDATE, function(e){
		_self.resourceManager.updateResource(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.RESOURCES_UPDATE_SUCCESS, function(e){
		_self.presenter.getMapPresenter().updateResouceMarker(e.data, true);
		_self.presenter.children.layerWindowPresenter.handleUpdateSuccess(e.data);

	});

	GEvent.addEventListener(Events.MapsEvent.SET_POSITION_DRAGGABLE_MARKER, function(e){
		_self.presenter.getMapPresenter().setDraggableMarkerPosition(e.data);
	});

	GEvent.addEventListener(Events.MapsEvent.LOADING_WINDOW_SHOW, function(e){
		_self.presenter.getMapPresenter().showLoadingWindow();
	});

	GEvent.addEventListener(Events.MapsEvent.LOADING_WINDOW_CLOSE, function(e){
		_self.presenter.getMapPresenter().closeLoadingWindow();
	});

	GEvent.addEventListener(Events.LayersEvent.SHOW_FRONT_LAYER_EVENT, function(e){
		var layer = Helper.layerHelper.getLayer(e.data);
		_self.presenter.getFrontLayerPresenter().showFrontLayerWindow(layer);
	});

	GEvent.addEventListener(Events.MemberEvent.SHOW_ADD_NEW_MEMBER_WINDOW, function(e){
		_self.presenter.getFrontMemberPresenter().showMemberWindow(e.data);
	});

	GEvent.addEventListener(Events.MemberEvent.SAVE_MEMBER, function(e){
		_self.layerManager.saveMember(e.data);
	});

	GEvent.addEventListener(Events.MemberEvent.MEMBER_CREATED, function(e){
		_self.presenter.getFrontLayerPresenter().handleMemberSaved(e.data);
		_self.presenter.getFrontMemberPresenter().closeMemberWindow();
	});

	GEvent.addEventListener(Events.MemberEvent.MEMBER_CREATED_FAILED, function(e){
		_self.presenter.getFrontMemberPresenter().showMemberCreatedFailed(e.data);
	});

	GEvent.addEventListener(Events.ResourcesEvent.LOADING_IMPORT_WINDOW_SHOW, function(e){
		_self.presenter.getConfirmDataResourcesPresenter().showLoadingImportWindow();
	});

	GEvent.addEventListener(Events.ResourcesEvent.LOADING_IMPORT_WINDOW_CLOSE, function(e){
		_self.presenter.getConfirmDataResourcesPresenter().closeLoadingImportWindow();
	});

	GEvent.addEventListener(Events.MemberEvent.EDIT_MEMBER_ACCESS_RIGHTS, function(e){
		_self.layerManager.editMember(e.data);
	});

	GEvent.addEventListener(Events.MemberEvent.UPDATE_MEMBER, function(e){
		_self.layerManager.updateMember(e.data);
	});

	GEvent.addEventListener(Events.MemberEvent.MEMBER_GET_UPDATED, function(e){
		_self.presenter.getFrontMemberPresenter().closeEditMemberWindow();
	});

	GEvent.addEventListener(Events.MemberEvent.MEMBER_GET_UPDATED_FAILED, function(e){
		_self.presenter.getFrontMemberPresenter().showUpdatedError();
	});

	GEvent.addEventListener(Events.MemberEvent.GET_MEMBER_SUCCESS, function(e){
		_self.presenter.getFrontMemberPresenter().showEditMemberWindow(e.data);
	});

}