(function($, s4ntc) {

  s4ntc.vem.VemHtmlPlayer = function(viewport, controller, options) {
    var defaults = {
      fnRender : function(htmlContent) {
        return $(htmlContent);
      }
    };
    s4ntc.vem.VemPlayer.call(this, viewport, controller, $.extend(true, {}, defaults, options));

    this.$wrapper = $('<div></div>').addClass('vem-html-player-wrapper');
    this.$wrapper.mouseenter(function() {
      viewport._element.trigger('mouseoverplayer');
    });
    this.$wrapper.mouseleave(function() {
      viewport._element.trigger('mouseoutplayer');
    });

    this._vemViewport._element.append(this.$wrapper);

    if(options.url != null) this.loadHtml(options.url);
  };
  s4ntc.vem.VemHtmlPlayer.prototype = new s4ntc.vem.VemPlayer();  

  s4ntc.vem.VemHtmlPlayer.prototype.loadHtml = function(url) {
    var mePlayer = this;
    $.get(url, {}, function(data) {
      mePlayer.processContent(data);
    });
  };

  s4ntc.vem.VemHtmlPlayer.prototype.processContent = function(htmlContent) {
    this.$wrapper.html(this._options.fnRender(htmlContent));
    this._vemController.playerEvent('playerready', []);
    this._vemController.globalEvent('playerready', []);
  };

  s4ntc.vem.Vem.prototype.PLAYERS['html'] = s4ntc.vem.VemHtmlPlayer;



  s4ntc.vem.VemCollectionPlayer = function(viewport, controller, options) {
    var defaults = {
      element_prototype_selector: '#vem_search_element_prototype .vem-search-element',
      base_element_id: 'vem_collection',
      fields: {
        'title': {
          prop_name: 'title',
          selector: 'span[data_prop_name=title]',
          fnRender: function(data, $parent, id, object) {
            $parent.html(data);
          }
        },
        'short_description': {
          prop_name: 'short_description',
          selector: 'span[data_prop_name=short_description]',
          fnRender: function(data, $parent, id, object) {
            $parent.html(data);
          }
        }
      }
    };
    s4ntc.vem.VemPlayer.call(this, viewport, controller, $.extend(true, {}, defaults, options));

    this.$prototype = $(this._options.element_prototype_selector).detach();

    this._collectionElements = [];
  };
  s4ntc.vem.VemCollectionPlayer.prototype = new s4ntc.vem.VemPlayer();

  s4ntc.vem.VemCollectionPlayer.prototype.empty = function() {
    this._collectionElements = [];
    this._vemViewport._element.html('');
  };

  s4ntc.vem.VemCollectionPlayer.prototype.drawCollection = function(collection, append) {
    if(append !== true) this.empty();
    
    for(var elid in collection) {
      var element = collection[elid];
      var internal_id = this._collectionElements.length;
      
      this._collectionElements.push(element);

      this._vemViewport._element.append(this.drawElement(element, internal_id));
    }
  };

  s4ntc.vem.VemCollectionPlayer.prototype.drawElement = function(element, id) {
    var $element = this.$prototype.clone();
    var fields = this._options.fields;
    var base_el_id = this._options.base_element_id;
    
    for(var fid in fields) {
      var selector = fields[fid].selector;
      var renderer = fields[fid].fnRender;
      var prop_name = fields[fid].prop_name;
      var data = element[prop_name];
      if( data !== undefined && typeof renderer == 'function') {
        renderer(data, $element.find(selector), id, element);
      }
    }

    $element.attr('id', [base_el_id, id].join('_'));
    $element.attr('data_collection_id', id);
    return $element;
  };

  s4ntc.vem.Vem.prototype.PLAYERS['search'] = s4ntc.vem.VemCollectionPlayer;


})(jQuery, window.s4ntc !== undefined ? window.s4ntc : (window.s4ntc = {}));