/**
 * The Syn.SocialBookmarkingButton Component Class
 */


/**
 * Create a Syn.SocialBookmarkingButton component instance
 * @contructor
 */
Syn.SocialBookmarkingButton = Syn.Component.extend (
{
	/**
	 * Initialize the component class -- called automatically the default constructor
	 *
	 * @member Syn.SocialBookmarkingButton
	 * @param {Object} config The configuration data structure
	 */
	init: function(config)
	{
		this._super(config);

		this.popup_width = (config.columns * 123) + 10;

		this.uniqueElmt('button').connect('click', this, 'openPopup');	
	},

	/**
	 * Opens the inline popup which will load the social_bookmarking_popup component
	 *
	 * @member Syn.SocialBookmarkingButton
	 * @param {Object} The target
	 * @param {Object} The event
	 */
	openPopup: function(target, event)
	{
		this.mx = event.pageX;
		this.my = event.pageY;

		this.popup({
			component: 'social_bookmarking_popup',
			draggable: false,
			closeable: true,
			resizable: false,
			width: this.popup_width + 'px'
		}, this, 'showPopup');
	},

	/**
	 * Positions the inline popup component so that it is always visible
	 * 
	 * @member Syn.SocialBookmarkingButton
	 */
	showPopup: function()
	{
		var popup = $('.syn_popup_social_bookmarking_popup');

		// check if the popup is overflowing off the viewport
		var win_height = $(window).height();
		var document_offset = $(document).scrollTop();
		var popup_offset = this.my - document_offset;
		var popup_height = popup.height();

		if (popup_height + popup_offset > win_height) // overflow
		{
			if (this.my - popup_height - document_offset < 0)
			{
				// align the top of the popup to the top of the window
				popup.css('top', document_offset + 'px');
			}
			else
			{
				// align the bottom of the popup to the click position	
				popup.css('top', this.my - popup_height + 'px');
			}
		}
		else
		{
			// align the top of the popup to the click position
			popup.css('top', this.my + 'px');
		}

		// align the left side
		popup.css('left', this.mx);

		// make it visible
		popup.css('display', 'block');		

	}
});