// tooltip via qtip/// http://craigsworks.com/projects/qtip/
// for HOME //

// (1) Works Gallery ////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function()
{
   $('#fukidashi1_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">ホームスタイリングの施工事例集</p><div style="line-height:130%;">住宅・リフォーム・店舗等、ホームスタイリングの<br />デザイン・設計・施工事例をご覧ください。</div><div style="margin-top:10px; line-height:120%; font-size:78%;">※Design House，Design Reform，Real Estate，Shop Design etc.に掲載しているGallery（施工例）を統合したページです</div>',
		   title: { text: 'Works Gallery' }
		}
		,
        style: { 
      		width: 300,
      		padding: 10,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'bottomMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'topMiddle', tooltip: 'bottomMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });
   
// (2) Design House //////////////////////////////////////////////////////////////////////////////////////// 
	   $('#fukidashi2_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">デザイン住宅</p><div style="line-height:130%;">シンプル、ナチュラル、アジアン、３種類の<br>スタイル住宅が特徴のデザイン住宅</div>',
		   title: { text: 'Desing House' }
		}
        , 
        style: { 
      		width: 240,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'topMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'bottomMiddle', tooltip: 'topMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        }); 

// (3) Design Reform ////////////////////////////////////////////////////////////////////////////////////////  
	   $('#fukidashi3_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">デザインリフォーム</p><div style="line-height:130%;">今より住みやすく、暮らしやすい、<br />ご家族が求める理想の住まいをご提案</div>',
		   title: { text: 'Design Reform' }
		}
        , 
        style: { 
      		width: 240,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'topMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'bottomMiddle', tooltip: 'topMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });  
// (4) Real Estate////////////////////////////////////////////////////////////////////////////////////////  
	   $('#fukidashi4_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">不動産サポート</p><div style="line-height:130%;">新築のための土地探し、住宅ローンのご相談、<br />不動産の運用などをサポート</div>',
		   title: { text: 'Real Estate' }
		}
        , 
        style: { 
      		width: 270,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'topMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'bottomMiddle', tooltip: 'topMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });  
// (5) Shop Design etc. (Other Building) /////////////////////////////////////////////////////////////////  
	   $('#fukidashi5_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">店舗デザイン他</p><div style="line-height:130%;">店舗・病院・事務所、アパート・マンションなど、<br />事業用スペースのデザイン・設計・施工事例</div>',
		   title: { text: 'Shop Design etc.' }
		}
        , 
        style: { 
      		width: 270,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'topMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'bottomMiddle', tooltip: 'topMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });  
// (6) Topics ////////////////////////////////////////////////////////////////////////////////////////  
	   $('#fukidashi6_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">最新情報</p><div style="line-height:130%;">イベント開催のご案内、お勧め物件など、<br />ホームスタイリングの最新情報</div>',
		   title: { text: 'Topics' }
		}
        , 
        style: { 
      		width: 240,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'bottomMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'topMiddle', tooltip: 'bottomMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });  
// (7) Company ////////////////////////////////////////////////////////////////////////////////////////  
	   $('#fukidashi7_idx').qtip({ 
		content: {
		   text: '<p style="font-weight:bold; margin:3px 0 8px 0;">会社概要</p><div style="line-height:130%;">ホームスタイリングの会社概要、<br />企業コンセプト、お問合せ方法など</div>',
		   title: { text: 'Company' }
		}
        , 
        style: { 
      		width: 220,
      		padding: 11,
			background: '#fff',
			name: 'light',
			title: { 'background-color': '#ccc', 'overflow': 'hidden' },	  
          tip: {corner: 'bottomMiddle'} 
        } 
        , 
        position: { 
          corner:{target: 'topMiddle', tooltip: 'bottomMiddle'} 
        } 
        , 
        show: {
			when: { event: 'mouseover'},
			effect: { type: 'slide', length: 400  }			
		}
		,
        hide: { 
			when: { event: 'mouseout'},
			effect: { type: 'slide', length: 400  }						
		}
        });   
});