$(document).ready(function(){

		// JavaScript Document$(document).ready(function(){

		//create a bubble popup for each <DIV> element with class attribute as ".button"
		$('div.button').CreateBubblePopup();
		
		//set different position and align options for each <DIV>
		var positions = {		
							'left-top'	   : {position: 'left',   align: 'top'    },
							'left-middle'  : {position: 'left',   align: 'middle' },
							'left-bottom'  : {position: 'left',   align: 'bottom' },
	
							'top-left'     : {position: 'top',    align: 'left'   },
							'top-center'   : {position: 'top',    align: 'center' },
							'top-right'    : {position: 'top',    align: 'right'  },
	
							'right-top'	   : {position: 'right',  align: 'top'    },
							'right-middle' : {position: 'right',  align: 'middle' },
							'right-bottom' : {position: 'right',  align: 'bottom' },
	
							'bottom-left'  : {position: 'bottom', align: 'left'   },
							'bottom-center': {position: 'bottom', align: 'center' },
							'bottom-right' : {position: 'bottom', align: 'right'  }
						};
						
		
		var buttons = {
		
							'facebookBtn'	: {totalPosition: 'left-top',		text: 'facebook social network'},
							'twitterBtn'	: {totalPosition: 'bottom-center',	text: 'tweeeet'}
		};
		
						
		for(var id in buttons){

			//set customized options for each bubble popup
			$('#'+id).SetBubblePopupOptions({
			
										position : positions[	buttons[id].totalPosition	].position,
										align	 : positions[	buttons[id].totalPosition	].align,
										tail	 : {align: positions[	buttons[id].totalPosition	].align},
										
										innerHtml: buttons[id].text,

										innerHtmlStyle: {
															color:'#FFFFFF', 
															'text-align':'center'
														},
										
										themeName: 	'all-black',
										themePath: 	'images/jquerybubblepopup-theme',
										
										alwaysVisible: false,
										closingDelay: 200
									 
									});
		}; //end loop

});