///
// ShareIt (requires)
//  - jId: ID of sharing container element
//  - items: a JSON collection of service items (email, facebook, etc.)
///
function ShareIt(jId, items) {

	var self = this;
	this.id = jId;
	this.share;
	this.shareItems;
	this.serviceItems;
	this.title;
	this.button;
	this.icon;
	this.popupBox;
	this.timer;

	this.Init = function() {
		this.share = $(jId);
		this.serviceItems = items;
		this.title = this.share.find('.Title');
		this.button = this.share.find('.Button');
		this.icon = this.button.find('.Icon');

		this.BuildPopup();

		this.icon.hover(function() {
			self.ShowPopup();
		}, function() {
			self.HidePopup();
		});
	}

	this.BuildPopup = function() {

	    if (this.serviceItems == undefined || this.serviceItems == null) return;

	    var items = this.serviceItems;
	    var div = $("<div class='Popup'></div>");

	    for (var i = 0; i < items.length; i++) {

	        var item = $("<a />").attr('href', items[i].Url).attr("target", "_blank")
				.append($("<div class='Item'></div>")
					.append($("<img />").attr('src', items[i].IconUrl).css('float', 'left'))
					.append($("<div />").text(items[i].Title).css('float', 'left')));

	        div.append(item);

	        if (i % 2 == 1) {
	            div.append($('<div class="Clear"></div>'));
	        }
	    }

	    this.popupBox = div;

	    var height = this.share.height() > 0 ? this.share.height() : 22;

	    this.popupBox.css('display', 'none').css('top', height + 'px').css('left', '0px')
			.hover(function() {
			    self.ShowPopup();
			}, function() {
			    self.HidePopup();
			});

	    this.share.append(this.popupBox);

	    this.shareItems = $('.SharingService .Popup .Item').hover(
			function() {
			    $(this).addClass('ItemHover');
			}, function() {
			    $(this).removeClass('ItemHover');
			});
	}

	this.ShowPopup = function() {
		this.popupBox.css('display', '');
		clearTimeout(this.timeout);
	}
	
	this.HidePopup = function() {

		this.timeout = setTimeout(function() { self.popupBox.css('display', 'none') }, 1000);
	}

	this.EnableHoverOnTitle = function() {
		this.title
			.css('cursor', 'pointer')
			.hover(function() {
				self.ShowPopup();
			}, function() {
				self.HidePopup();				
			});
	}

	this.Update = function() {
	    this.BuildPopup();
	}

	this.Init();
}