$(document).ready(function(){

	// Notice the use of the each() method to acquire access to each elements attributes
	
	//$('#content a[tooltip]').each(function(){
	$('.leftcolumn').each(function(){
		$(this).qtip({
			content: $(this).attr('tooltip'), //Use the tooltip attribute of the element for the content
			position: {
				corner: {
					//target: 'bottomRight', //that corner of the link the tooltip relates to (see below)
					//tooltip: 'topRight' //the corner of the tooltip that relates to the previous position
					target: 'bottomLeft', //that corner of the link the tooltip relates to (see below)
					tooltip: 'topLeft' //the corner of the tooltip that relates to the previous position
				},
				adjust: { 
					//screen: true
				}	
			},
			style: {
				width: 801,
				//tip: 'topRight',
				name: 'dark',
				border: {width: 1,radius: 5}
			}			
		});
	//.'.attr(\'title\', \'\')'
	});
	
	//middle column
	$('.middlecolumn').each(function(){
		$(this).qtip({
			content: $(this).attr('tooltip'), //Use the tooltip attribute of the element for the content
			position: {
				corner: {
					//target: 'bottomRight', //that corner of the link the tooltip relates to (see below)
					//tooltip: 'topRight' //the corner of the tooltip that relates to the previous position
					target: 'bottomMiddle', //that corner of the link the tooltip relates to (see below)
					tooltip: 'topMiddle' //the corner of the tooltip that relates to the previous position
				},
				adjust: { 
					screen: true
				}	
			},
			style: {
				width: 801,
				//tip: 'topRight',
				name: 'dark',
				border: {width: 1,radius: 5}
			}			
		});
	//.'.attr(\'title\', \'\')'
	});
	
	//right column
	$('.rightcolumn').each(function(){
		$(this).qtip({
			content: $(this).attr('tooltip'), //Use the tooltip attribute of the element for the content
			position: {
				corner: {
					//target: 'bottomRight', //that corner of the link the tooltip relates to (see below)
					//tooltip: 'topRight' //the corner of the tooltip that relates to the previous position
					target: 'bottomRight', //that corner of the link the tooltip relates to (see below)
					tooltip: 'topRight' //the corner of the tooltip that relates to the previous position
				},
				adjust: { 
					//screen: true
				}	
			},
			style: {
				width: 801,
				//tip: 'topRight',
				name: 'dark',
				border: {width: 1,radius: 5}
			}			
		});
	//.'.attr(\'title\', \'\')'
	});
	
	//slogan column
	$('.slogan').each(function(){
		$(this).qtip({
			content: $(this).attr('tooltip'), //Use the tooltip attribute of the element for the content
			position: {
				corner: {
					//target: 'bottomRight', //that corner of the link the tooltip relates to (see below)
					//tooltip: 'topRight' //the corner of the tooltip that relates to the previous position
					target: 'bottomMiddle', //that corner of the link the tooltip relates to (see below)
					tooltip: 'topMiddle' //the corner of the tooltip that relates to the previous position
				},
				adjust: { 
					//screen: true
				}	
			},
			style: {
				width: 801,
				//tip: 'topRight',
				name: 'dark',
				border: {width: 1,radius: 5}
				
				/*new*/
				/*background: '#aaa', //background color //'#A2D959'
				color: 'black' //text color*/
				//textAlign: 'center',
				
				/*end new*/
				
			},
			hide: { when: 'mouseout', fixed: true }
		});
	//.'.attr(\'title\', \'\')'
	});
	
	//other
	
	//set style
	$.fn.qtip.styles.mystyle = { // Last part is the name of the style
	   tip: 'bottomLeft',
	   name: 'dark' // Inherit the rest of the attributes from the preset dark style
	}
	
	//'tooltip' class
	$('.tooltip').each(function(){
		$(this).qtip({
			content: $(this).attr('tooltip'), //Use the tooltip attribute of the element for the content
			/*style: 'mystyle',*/
			position: {
				corner: {
					target: 'topMiddle', //that corner of the link the tooltip relates to (see below)
					tooltip: 'bottomLeft' //the corner of the tooltip that relates to the previous position
				}	
			}			
		});
	//.'.attr(\'title\', \'\')'
	});
	
})