<style type="text/css"> 

ul#images_list > li { 
list-style-type: none;
 position: relative; 
 width:600px; 
 height:300px; 
 background:#ffff; 
 border:5px solid #100; 
 }

 div.image_holder { 
 position: relative; 
 text-align: center; 
 }

img.lt_img { 
position: absolute; 
left:0; 
top: 0; 
z-index:1005;
}

lt_p { 
position: absolute; 

}

img.lt2_img {
position: absolute; 
display: none; 
left:0; 
top:0; 
z-index:1006; 
} 

img.rt_img { 
position: absolute; 
position: absolute; 
right: 0; 
top: 0; 
z-index:1005;
} 

img.rt2_img { 
display: none; 
position: absolute; 
right: 0; 
top: 0; 
z-index:1006;
} 

img.lb_img {  
position: absolute; 
left: 0; 
bottom: 0; 
z-index:1005;
} 

img.lb2_img { 
display: none; 
position: absolute; 
left: 0; 
z-index:1006;
bottom: 0; 
} 

img.rb_img { 
position: absolute; 
right: 0; 
bottom: 0; 
z-index:1005;
} 

img.rb2_img { 
display: none; 
position: absolute; 
right: 0; 
bottom: 0; 
z-index:1006;
} 

.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:1007;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		   }
		   .white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 2%;
			width: 80%;
			height: 90%;
			padding: 16px;
			border: 10px solid black;
			background-color: white;
			z-index:1008;
			overflow: auto;
		   }

</style>
<!--Call jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script src="http://192.168.1.80:8080/src/jquery.cookie.js"></script>
<script src="http://192.168.1.80:8080/src/jquery.editable-1.3.3.min_.js"></script>
<script src="http://192.168.1.80:8080/src/jquery.livequery.js"></script>

<script type="text/javascript">
		
jQuery(document).ready(function() {
	
	// epilegw oles tis eikones, kai gia ka8e eikona kanw mia sugekrimeni "energeia" (action)
	jQuery("div.image_holder> ul#images_list > li ").each(function(index, element) {
	
				// dimiourgw 6 nees eikones kai tous dinw ta katallhla onomata klassewn
				// ka8ws epishs kai orizw to pososto twn diastasewn tous 
				
				var myNewImg1 = jQuery('<img class="lt_img" width="100" height="100" />').appendTo(jQuery(this));
				var myNewImg2 = jQuery('<img class="rt_img" width="130" height="80" />').appendTo(jQuery(this));
				var myNewImg3 = jQuery('<img class="lb_img" width="90" height="85" />').appendTo(jQuery(this));
				var myNewImg4 = jQuery('<img class="rb_img" width="200" height="44" />').appendTo(jQuery(this));
				
//-----------------------------------			
				var myNewImg7 = jQuery('<img class="lt2_img" width="20" height="20" />').appendTo(jQuery(this)); 
			    var myNewImg8 = jQuery('<img class="rt2_img" width="20" height="20" />').appendTo(jQuery(this)); 
				var myNewImg9 = jQuery('<img class="lb2_img" width="20" height="20" />').appendTo(jQuery(this)); 
				var myNewImg10 = jQuery('<img class="rb2_img" width="20" height="20" />').appendTo(jQuery(this)); 
				
//-----------------------------------			
				jQuery(myNewImg1).attr("src", "http://www.istl.teiher.gr/html/themes/ext/istlab-main-theme-1/images/liferay.ico"); //ist
				jQuery(myNewImg2).attr("src", "	http://www.teicrete.gr/mta/gr/sites/mta/images/logo_Diamouses.PNG"); //diamouses
		        jQuery(myNewImg3).attr("src", "http://www.eacr.org/img/news_eurocancercoms.jpg"); //eccs
				jQuery(myNewImg4).attr("src", "http://4.bp.blogspot.com/_oqcLJuQR62I/SeLoqfHaKQI/AAAAAAAAAR4/BlL00JsYO5s/s200/GlobalTop2.jpg"); //eKones
				
//-----------------------------------				
				jQuery(myNewImg7).attr("src", "http://www.aicpcu.org/Images/layout/icons/info.png"); //i
				jQuery(myNewImg8).attr("src", "http://www.aicpcu.org/Images/layout/icons/info.png"); //i
				jQuery(myNewImg9).attr("src", "http://www.aicpcu.org/Images/layout/icons/info.png"); //i
				jQuery(myNewImg10).attr("src", "http://www.aicpcu.org/Images/layout/icons/info.png"); //i
				
				
	jQuery(this ).hover(

		function(){

					var $that = this;
							if (index == 0) {
							
						
			jQuery("img.lt_img").fadeIn('2000', function(){});
            jQuery("img.rt_img").fadeIn('2000', function(){});
			jQuery("img.lb_img").fadeIn('2000', function(){});			
            jQuery("img.rb_img").fadeIn('2000', function(){});  
		  
		
						
//-----------------------------------	
		jQuery(myNewImg1).hover(
				 
				 function(){
				   jQuery(myNewImg7).show('slow', function(){});
				 
					 },
				 function() {
				 jQuery("img.lt2_img,").hide();
				 }
				   
				);

				jQuery(myNewImg7).click(
					
				  function showPopUp()
                               {
									document.getElementById('light_lt').style.display='block';
									document.getElementById('fade').style.display='block';
		                       }			
				   );
//-----------------------------------
		
		jQuery(myNewImg2).hover(
				 
				 function(){
		
				 
				   jQuery(myNewImg8).show('slow', function(){});
					 },
					 
				 function() {
	
				 jQuery("img.rt2_img").hide();
				 }
				   
				);
				jQuery(myNewImg8).click(
					
				  function showPopUp()
                               {
									document.getElementById('light_rt').style.display='block';
									document.getElementById('fade').style.display='block';
		                       }			
				   );
//-----------------------------------
				jQuery(myNewImg3).hover(
				 
				 function(){
		
				 
				   jQuery(myNewImg9).show('slow', function(){});
					 },
					 
				 function() {
			
				 
				 jQuery("img.lb2_img").hide();
				 }
				   
				);
				jQuery(myNewImg9).click(
					
				  function showPopUp()
                               {
									document.getElementById('light_lb').style.display='block';
									document.getElementById('fade').style.display='block';
		                       }			
				   );
//-----------------------------------				
				jQuery(myNewImg4).hover(
				 
				 function(){
				
				 
				   jQuery(myNewImg10).show('slow', function(){});
					 },
					 
				 function() {
				 console.log("inside hide mikris");
				 
				 jQuery("img.rb2_img").hide();
				 }
				   
				);
				jQuery(myNewImg10).click(
					
				  function showPopUp()
                               {
									document.getElementById('light_rb').style.display='block';
									document.getElementById('fade').style.display='block';
		                       }			
				   );

//-----------------------------------			
          
			
				// efarmozw se ka8e mia apo tis eikones click event kai ektelo tin PopUp
			}
						else if (index == 1) {
				  }
			},
			function() {
		jQuery("img.lt2_img, img.rt2_img, img.lb2_img, img.rb2_img,").hide();
			}
		);
	
});	
});

</script>


<div class="image_holder">
			<ul id="images_list">
					<li>
					#set ($central_img = $gallery.get('central_image')) 
					#if ( "$central_img" != "" )	
					<img width="600" height="300" src="$central_img.getData()" class="main_image" alt="" />
					#end
			</li>
</ul>

<a href="javascript:showPopUp();"></a>
		
		<div id="light_lt" class="white_content">
			<a href = "javascript:void(0)" onclick = "document.getElementById('light_lt').style.display='none'; document.getElementById('fade').style.display='none'">
				<span>
				  <img src="http://www.aspexdesign.co.uk/clipart/s_gs_x.gif" width="10" height="10" style="float: right" />
				</span>
			</a>
					<img src="	http://www.istl.teiher.gr/html/themes/ext/istlab-main-theme-1/images/common/banner_bg.png"  /> 
					
			<div style="float: right;">	
					 #foreach ($each_section in $pop_up_txt.getSiblings())
					#set ($txt = $pop_up_txt.get('pop_up_txt'))
					#if ( "$txt" != "" )
						
					<p> $txt.getData()</p>
					#end

     		</div>
			#end
		</div>
		
		<div id="light_rt" class="white_content">
			<a href = "javascript:void(0)" onclick = "document.getElementById('light_rt').style.display='none'; document.getElementById('fade').style.display='none'">
				<span>
				  <img src="http://www.aspexdesign.co.uk/clipart/s_gs_x.gif" width="10" height="10" style="float: right" />
				</span>
			</a>
			<img src="http://www.teicrete.gr/diamouses/dicon.ico"  /> 
			
			<div style="float: right;">
				<p>           ,         .  ,          ,     ... (  ) .         :          .          &  (...)  ...   ,       . 
         ,               . -           ,     . , -            ,            ,       . ,   ,        ,      ,               . 

</p>
     		</div>
		</div>
		
		<div id="light_lb" class="white_content">
			<a href = "javascript:void(0)" onclick = "document.getElementById('light_lb').style.display='none'; document.getElementById('fade').style.display='none'">
				<span>
				  <img src="http://www.aspexdesign.co.uk/clipart/s_gs_x.gif" width="10" height="10" style="float: right" />
				</span>
			</a>
			<img src="http://www.eurocancercoms.eu/images/logo.gif"  /> 
			<div style="float: right;">
				<p>                      .                  .                                      ,          .       ,         on-line       .               .                       ,                        .  
</p>
     		</div>
		</div>
			
		<div id="light_rb" class="white_content">
			<a href = "javascript:void(0)" onclick = "document.getElementById('light_rb').style.display='none'; document.getElementById('fade').style.display='none'">
				<span>
				  <img src="http://www.aspexdesign.co.uk/clipart/s_gs_x.gif" width="10" height="10" style="float: right" />
				</span>
			</a>
			<img src="http://www.photo-canvas.com/img/gallery/photographic/flowers/flower001.JPG"  /> 
			<div style="float: right;">
				<p>  eKoNE  e   &                        .                .                      (..    )    .             ,  ,           ,      .  ,                ,          ,            /           . ,             .</p>
     		</div>
		</div>
		
	<div id="fade" class="black_overlay"> </div>
</div>