/**
 * Easier marker class for use with jquery templates, of course only use this class 
 * after jquery has loaded
 * @author Mike De Smet <mike@ratus.nl>
 */
function HTMLMarker(opt_options) {
    var $ = typeof jQueryForExternals === 'undefined' ? jQuery : jQueryForExternals;
    
    this.myOptions = typeof opt_options === 'object' ? opt_options : {};
    if (this.myOptions.clusterZoomOnClick === undefined)
        this.myOptions.clusterZoomOnClick = true;
    
    this.setValues(this.myOptions);
    this.added = 0;
    
    this.makeDiv();
    this.cluster_ = [];
    this.clusterer = null;
    this.position = this.get('position');
};



(function ($) {

HTMLMarker.prototype = new google.maps.OverlayView;

HTMLMarker.prototype.makeDiv = function () {
    
    var wrapperDiv = $('<div />').addClass(Math.random());
    var me = this;
    $(wrapperDiv)
        .css('position', 'absolute')
        .addClass('HTMLMarker')
        .append( $.tmpl(this.get('template'), [this.get('data')]) )
        .data('htmlMarker', this)
        .bind('mouseover', function () {
            if ($(this).data('htmlMarker').cluster_.length > 0)
                return;

            $(this).addClass('hover').data('htmlMarker').draw();
        })
        .bind('mouseout', function () {
            $(this).removeClass('hover').data('htmlMarker').draw();
        })
        .bind('click', function (event) {
            
            var marker = $(this).data('htmlMarker');
                
            
            if ($(this).data('htmlMarker').cluster_.length > 1)
            {
                event.preventDefault();
                event.stopPropagation();
                var mz = marker.getClusterer().getMarkerClusterer().getMaxZoom();
                if (marker.get('clusterZoomOnClick')) {
                  // Zoom into the cluster.
                  var map = marker.getMap();
                  marker.getMap().fitBounds(marker.getClusterer().getBounds());
                  // Don't zoom beyond the max zoom level
                  if (mz && (map.getZoom() > mz)) {
                    map.setZoom(mz + 1);
                  }
                }
                return false;
            }
            
            var toTrigger = marker.get('click');
            
            if (toTrigger)
                toTrigger(event);
        });

    this.div_ = $(wrapperDiv);
}

HTMLMarker.prototype.onAdd = function() {
    if (!this.div_)
        this.makeDiv();
    
        
    this.getPanes().overlayImage.appendChild($(this.div_).get(0));

    if (this.get('zIndex'))
        $(this.div_).eq(0).parent().css('zIndex', this.get('zIndex'));

    $(this.div_).attr('title', $(this.div_).data('htmlMarker').data.modelnaam);

    this.listeners_ = [];
    this.listeners_.push(google.maps.event.addListener(this, 'zindex_changed', this.draw));
};

HTMLMarker.prototype.onRemove = function() {
    this.cluster_ = []; 
    this.clusterer = null;
    
     if (this.div_)
     {
     	$(this.div_).stack('remove').removeClass('hover').remove();
     }
     this.div_ = null;


     $.each(this.listeners_, function (key, listener) {
          google.maps.event.removeListener(listener);
     });
};

HTMLMarker.prototype.getDraggable = function() {
     return false;
};

HTMLMarker.prototype.getPosition = function () {
    return this.position;
};

HTMLMarker.prototype.setPosition = function (pos) {
    this.position = pos;
    this.draw();
};


HTMLMarker.prototype.setCluster = function (cluster) {
   this.cluster_ = cluster;
   
   if (!this.div_)
       return;  
 
   if (this.cluster_ && this.cluster_.length > 1)
   {
       this.div_.addClass('cluster');
   }
   else
   {
      this.div_.removeClass('cluster').stack('remove');
   }
};

HTMLMarker.prototype.setClusterer = function (clusterer) {
    this.clusterer = clusterer;
}

HTMLMarker.prototype.getClusterer = function () {
    return this.clusterer;
}

HTMLMarker.prototype.hide = function () {
  if (this.div_) {
     $(this.div_).hide();
  }
  this.visible_ = false;
};

HTMLMarker.prototype.clone = function () {
    return new HTMLMarker(this.myOptions);
};

HTMLMarker.prototype.show = function (ignoreShow) {
  if (this.div_) {
    var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
    
    var div = $(this.div_);
    
    switch (this.get('anchor'))
    {
        case 'nw':
            div.css({
                left: position.x,
                top: position.y
            });
            break;
        case 'middle':
        case 'center':
        default:
            div.css({
                left: parseInt(position.x - div.width()/2, 10),
                top: parseInt(position.y - div.height()/2, 10)
            });
            break;
    }
    
    if (ignoreShow === undefined)
        div.css({display: 'block'});
    
    if (this.cluster_.length > 1)
        div.stack({amount: this.cluster_.length - 1});
    else
        div.stack('remove');
  }
  this.visible_ = true;
};

HTMLMarker.prototype.draw = function() {
   this.show(true);
};

})(typeof jQueryForExternals === 'undefined' ? jQuery : jQueryForExternals);