$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('img[class=modal]').click(function(e) {
		e.preventDefault();

		var id = "#hogyan_dialog";
		var img = $(this).attr('src').replace('tb_','');

		var selfTop = $(this).offset().top;
		
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		$('#hogyan_mask').css({'width':maskWidth,'height':maskHeight});
		
		$('#hogyan_mask').fadeIn(500);	
		$('#hogyan_mask').fadeTo("fast",0.8);	
	
		var winH = $(window).height();
		var winW = $(window).width();
		
		var vth = winH/2-$(id).height()/2;
		
		var modalTop = selfTop - 150; 
		
		//$(id).css('top', winH/2-$(id).height()/2 );
		$(id).css('top', modalTop);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).html('<img src="'+img+'" width="800" height="600">');
	
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.hogyan_window').click(function (e) {
		e.preventDefault();
		$('#hogyan_mask').hide();
		$('.hogyan_window').hide();
	});		
	
	$('#hogyan_mask').click(function () {
		$(this).hide();
		$('.hogyan_window').hide();
	});			
	
});