/*
	Pembuat: Chandra Jatnika
	Website: chandrajatnika.com
	Nama   : T10 Tooltip
	Tujuan : Membuat Tooltip dinamis di setiap element HTML
*/
var T10Tooltip = Class.create(
  { 
    // method initialize adalah konstruktor dari class T10Tooltip
	initialize: function(){ 
		/* tidak melakukan apa-apa, anda bisa menambahkan beberapa 
		   perintah disini apabila ingin mengembangkan */
	},	
	set: function(element,filename,maxwidth){	
		/* periksa apakah nama file adalah sebuah image karena program selanjutnya
		   akan memperlakukan hal berbeda antara image atau file text */
		var isImage = this._isImage(filename);
		
		// siapkan id unik untuk tiap element tooltip
		var id = this._tooltipID + element;
		
		// jika lebar maksimal tooltip tidak didefinisikan maka defaultnya adalah 400px
		var maxwidth = maxwidth || 200;
		
		// buat element berupa tag div untuk membuat element tooltip
		var div = '<div id="'+id+'" style="position:absolute; ';
		div += 'left:0px; top:0px; border:1px solid #000; padding:4px; ';
		div += 'font-size:11px; background-color: #FFF; width: '+maxwidth+'px"></div>'
		
		// sisipkan element tooltip ke dalam dokumen
		new Insertion.Bottom(document.body, div)
		$(id).hide(); // setelah selesai disisipkan lalu sembunyikan element 
		
		var hasLoad = false;		
		Event.observe(element,'mouseover',function(event){
			/* variable hasLoad sebelumnya bernilai false dan jikalau masih false maka 
			   perintah di bawahnya akan dieksekusi, namun setelah itu hasLoad di setting
			   lagi dengan nilai true. ini bertujuan agar load content hanya dilakukan 1 kali
			   sampai element tooltip terisi penuh dari content yg diinginkan. ini semua dilakukan
			   karena event mouse over akan terus dipanggil berkali-kali apabila mouse terus 
			   bergerak di atas element pemicu tooltip */									   
			if(!hasLoad){
				hasLoad = true;
				if(isImage) $(id).update('<img src="'+filename+'">'); // load file image
				else new Ajax.Updater(id,filename,{method: 'get'}); // load file text
			}
			$(id).show(); // tampilkan element tooltip yg sebelumnya disembunyikan
			
			// dua baris di bawah untuk menentukan posisi koordinat element tooltip 
			//$(id).style.top = Event.pointerY(event) + 'px'; 
			//$(id).style.left = Event.pointerX(event) + 'px';
			
			// element tidak akan hilang apabila mouse menuju ke element tersebut
			Event.observe(id,'mouseover',function(){ $(id).show() });
			Event.observe(id,'mouseout',function(){ $(id).hide() });
		});
		
		Event.observe(element,'mousemove',function(event){ 
			// dua baris di bawah untuk menentukan posisi koordinat element tooltip 
			$(id).style.top = Event.pointerY(event)+ 2 + 'px'; 
			$(id).style.left = Event.pointerX(event) + 'px';
		});
		
		/* apabila mouse keluar dari element pemicu tooltip maka 
		   element tooltip akan disembunyikan */
		Event.observe(element,'mouseout',function(){
			$(id).hide()
		});
	},
	_isImage: function(filename){
		// ambil extention file
		var extention = filename.split('.').last(); 		
		// tentukan extention dari beberapa image
		var imagearray = ['jpg','jpeg','png','gif','bmp','ico'];			
		// jika extention file mengandung extention image maka kembalikan nilai true
		return (imagearray.indexOf(extention) > -1)
	},
	/* id unik untuk membentuk id element tooltip, dapat anda ubah apabila banyak 
	   element dengan id serupa di dalam web anda */
    _tooltipID: '_divToolTip' 
  }
);