var ProfileCards = new Class({
	
	options: {
		delayToShow: 1000
	},
	
	initialize: function(){
		this.elemsById = [];
		this.profileCard = null;
		
		document.addEvent('click', function(e){
			if (this.profileCard && (e.target && !e.target.hasClass('ig-namespace'))) {
				this.closeCard();
			}
		}.bind(this));
	},
	
	removeCard: function(trigger) {
		var newTrigger = $(trigger).clone();
		newTrigger.replaces($(trigger));
	},
	
	setupCard: function(trigger, userId, displayonclick){
		var loadCardFunction = function(){
			if ( this.elemsById[userId] === undefined ) {
				var myAjax = new ApiClient({
					'apimethod':'igloo/widgets/27/render',
					'queryparams':{
						'paramList':'idList,triggerId',
						'paramTypes':'string,string'
					},
					'postdata':{
						'idList':userId,
						'triggerId':trigger.id
					},
					onSuccess:function(text,xml){
						var JSONresponse = JSON.decode(text,true);
						if( JSONresponse === null ){ return false; }
						var JSONhtml = JSON.decode(JSONresponse.response.items[2].value);
						if( JSONhtml === null ){ return false; }
						
						Object.each(JSONhtml, function(html, UserId){
							this.elemsById[UserId] = html;
						}.bind(this));
						
						// If the API took longer to respond than the timeout to show the card
						// then there should be a spinner showing.. this is our flag that we
						// need to remove that spinner and show the profile card.
						if( this.spinnerId !== undefined ){
							this.spinnerId = window.igLoadingCursor.removeLoader(this.spinnerId);
							this.drawProfileCard(trigger, userId);
						}
						this.attachMbHandler();
					}.bind(this)
				});
			}
		}.bind(this);
		var self = this;
		var afterTimeoutFunction = function(trigger, userId){
			if( self.elemsById[userId] !== undefined ){
				self.drawProfileCard(trigger, userId);
				self.attachMbHandler();
			} else {
				self.spinnerId = window.igLoadingCursor.addLoader();
			}
		};
		
		var timeoutId;
		trigger.addEvent('mouseenter', function(){
			loadCardFunction();	// Load the profile card on mouse enter...
			timeoutId = afterTimeoutFunction.delay(this.options.delayToShow, this, [trigger, userId]);	// ...but delay the opening of the profile card.
		}.bind(this));
		if (displayonclick) {
			trigger.addEvent('click', function(e){
				e.preventDefault();
				loadCardFunction();
				afterTimeoutFunction(trigger, userId);
			}.bind(this));
		}
		trigger.addEvent('mouseleave', function(){
			window.clearTimeout(timeoutId);
		});
	},
	
	attachMbHandler: function () {
		var message = 'profilecard-namespace';
		var trigger = 'profilecard-namespace-trigger';
		this.mbHandler = new appMicroblogUserbarHandler({
			'action':'openMenuDefaultText',
			'message':message,
			'trigger':trigger
		});
	},
	
	closeCard: function() {
		this.profileCard.close();
		if (this.mbHandler) {
			delete this.mbHandler;
		}
	},
	
	drawProfileCard: function(elem, userId){
		var contents = this.elemsById[userId];
		
		if (this.profileCard) {
			this.closeCard();
		}
		
		this.profileCard = new Minimodal({
			'injectat':'top',
			'injectpoint':document.body,
			'trigger':elem,
			'x-offset':-10,
			'y-offset':-10,
			'customclass':'ig-minimodal-profile',
			'width':350
		});
		elem.profileCard = this.profileCard;
		
		var wrapper = new Element('div', {
			'class': 'ig-profilecard-wrapper ig-clearfix vcard',
			'html': contents
		}).inject(this.profileCard.contentformnobr, 'top');
		
		// Profile card images may take a while to load if they're not cached.
		// This delayed loading resizes the modal container but not the shadow.
		// Add a 'load' event listener on the images to resize the modal and shadow:
		wrapper.getElements('img').addEvent('load', function(){
			this.profileCard.resize();
		}.bind(this));
		
		this.profileCard.minimodalform.addEvent('click', function(event){		event.stopPropagation();	});
		
		this.profileCard.shadow();
		
		bootstrap(wrapper);
	}
	
});

var PC = new ProfileCards();

window.addEvent('bootstrap4finished', function(){
	if(window.dependents['ProfileCards']){
		window.dependents['ProfileCards'].each(function(elem){
			if(elem.dataobj){
				var dataobj = typeOf(elem.dataobj)=='string' ? JSON.decode(elem.dataobj) : elem.dataobj;
				if(dataobj && dataobj.ProfileCards && dataobj.ProfileCards.UserId){
					var UserId = dataobj.ProfileCards.UserId.replace(/[\{\}]/g,'');
					PC.setupCard(elem, UserId);
				}
			}
		});
	}
	var namespaceInputs = $$('a.ig-mention-link');
	Array.each(namespaceInputs, function(element) {
		var isAttached = element.getProperty('pcattached');
		if (!isAttached) {
			var userId = element.getProperty('namespace');
			if (userId == null) {
				userId = element.getProperty('unsafe.namespace');
			}
			if (userId) {
				element.setProperty('href', '#');
				element.setProperty('pcattached', 'true');
				userId = userId.replace(/[\{\}]/g,'');
				PC.setupCard(element, userId, true);
			}
		}
	});
});

window.addEvent('domready', function(){
	if(Igloo.asset_ProfileCards){
		Object.each(Igloo.asset_ProfileCards, function(options, id){
			if(options.UserId){
				var elem = $(id);
				if(elem){
					PC.setupCard(elem, options.UserId);
				}
			}
		});
	}
	var namespaceInputs = $$('a.ig-mention-link');
	namespaceInputs.combine($$('a.taskprofilecard'));
	Array.each(namespaceInputs, function(element) {
		var isAttached = element.getProperty('pcattached');
		if (!isAttached) {
			var userId = element.getProperty('namespace');
			if (userId == null) {
				userId = element.getProperty('unsafe.namespace');
			}
			if (userId) {
				createProfileCard(element, userId);
			}
		}
	});
});

function removeProfileCard(element) {
	element.setProperty('pcattached', 'false');
	PC.removeCard(element);
}

function createProfileCard(element, userId) {
	element.setProperty('href', '#');
	element.setProperty('pcattached', 'true');
	userId = userId.replace(/[\{\}]/g,'');
	PC.setupCard(element, userId, true);
}