L.CustomMarker = L.Class.extend({

	includes: L.Mixin.Events,
	
	options: {
		contentCreator: undefined,
		shadowCreator: undefined,
		clickable: true,
		draggable: false
	},
	
	initialize: function(latlng, options) {
		L.Util.setOptions(this, options);
		this._latlng = latlng;
	},
	
	onAdd: function(map) {
		this._map = map;
		
		if (!this._element && this.options.elementCreator) {
			this._element = this.options.elementCreator();
			
			this._element.className += ' leaflet-marker-icon';
			
			this._initInteraction();
		}
		if (!this._shadow && this.options.shadowCreator) {
			this._shadow = this.options.shadowCreator();
		}

		if (this._element) {
			map._panes.markerPane.appendChild(this._element);
		}
		if (this._shadow) {
			map._panes.shadowPane.appendChild(this._shadow);
		}
		
		map.on('viewreset', this._reset, this);
		this._reset();
	},
	
	onRemove: function(map) {
		if (this._element) {
			map._panes.markerPane.removeChild(this._element);
		}
		if (this._shadow) {
			map._panes.shadowPane.removeChild(this._elementShadow);
		}
		
		map.off('viewreset', this._reset, this);
	},
	
	getLatLng: function() {
		return this._latlng;
	},
	
	setLatLng: function(latlng) {
		this._latlng = latlng;
		this._reset();
	},
	
	_reset: function() {
		var pos = this._map.latLngToLayerPoint(this._latlng);
		
		if (this._element) {
			L.DomUtil.setPosition(this._element, pos);
		}
		if (this._shadow) {
			L.DomUtil.setPosition(this._shadow, pos);
		}
		
		if (this._element) {
			this._element.style.zIndex = pos.y;
		}
	},
	
	_initInteraction: function() {
		if (this._element && this.options.clickable) {
			this._element.className += ' leaflet-clickable';
			
			L.DomEvent.addListener(this._element, 'click', this._onMouseClick, this);

			var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout'];
			for (var i = 0; i < events.length; i++) {
				L.DomEvent.addListener(this._element, events[i], this._fireMouseEvent, this);
			}
		}
		
		if (this._element && L.Handler.MarkerDrag) {
			this.dragging = new L.Handler.MarkerDrag(this);
			
			if (this.options.draggable) {
				this.dragging.enable();
			}
		}
	},
	
	_onMouseClick: function(e) {
		L.DomEvent.stopPropagation(e);
		if (this.dragging && this.dragging.moved()) { return; }
		this.fire(e.type);
	},
	
	_fireMouseEvent: function(e) {
		this.fire(e.type);
		L.DomEvent.stopPropagation(e);
	}
});