$.fn.image = function(src, f){ 
	  return this.each(function(){ 
		var i = new Image(); 
		i.src = src;
		i.border=0;
		i.onload = f; 
		this.appendChild(i);
	  }); 
	}
	
	$(document).ready(function() {	
		
		$('a.remote, li.menuItem a, li.menuImage a').remote('#content', function() {
			$("#content").fadeIn("slow"); //animation 
		  	loadPictures('#' + this.title);

		});

		$.ajaxHistory.initialize();	
	
		
		$(".topMenu li.menuItem").hover(function () {
			// animate opacity to full
			$(this).find('#menuImage.normal').stop().animate({
				opacity: 0
			}, 'fast');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).find('#menuImage.normal').stop().animate({
				opacity: 1
			}, 'fast');
		});
			
		
		//$('li.leftMenuLink').find("ul#subcategory").css("display","none").css('opacity','0');
		
		$("a.leftMenuLink").click(function () {
			$('li.leftMenuLink').find("ul#subcategory").css("display","none").css('opacity','0');				
			$(this).next('ul').css('opacity','0').css('display','block').stop().animate({
				opacity: 1
			}, 'slow');
			
		});
		
		$('#imagesContainer a').lightBox();
		$("#paging > a#pages").click(function () {
			$(document).find("#paging > a#pages").addClass("unselected");
			$(this).removeClass('unselected').addClass("selected");
			filename = $(this).find('#imageFilename').text();
			filename_big = $(this).find('#imageFilenameBig').text();
			$("#paging").fadeOut('fast');
			$("#imagesContainer").fadeOut('fast',
										function(){	
											$('#imagesContainer').html('');
											$('#imagesContainer').append($('<a id="imageBig"></a>').attr({
													'title': 'Μεγέθυνση',													
													'href': filename_big,
													'class': 'lightbox'
												  }));		
											$('a#imageBig').image(filename,
																   function(){
																	   	$("#imagesContainer").stop().fadeIn();
																		$("#paging").stop().fadeIn();
																	});	
											$('#imagesContainer a').lightBox();
										});



		});	
		
		//initializing the dhtmlHistory object

		urlItems = document.location.href.split("#");
		if(urlItems.length>1){
			loadSection(urlItems[1]);
			loadPictures(urlItems[1]);
		 } //else {			 
			//$("#content").css('display','').fadeIn("slow"); 
		 //}		
		
					   
 	});		
	
	function loadSection(targetURL){					
				dataItems = targetURL.split("/");	
				$("#content").fadeOut("slow",function(){
					$.ajax({ 
					method: "get", url: "center.php", data: 'id=' + dataItems[1] +'&l=' + dataItems[2] , 
					beforeSend: function(){}, //show loading just when link is clicked 
					complete: function(){}, //stop showing loading when the process is complete 
					success: function(html){ //so, if data is retrieved, store it in html 
						$("#content").html(html); //show the html inside .content div 
						$("#content").fadeIn("slow"); //animation 					
					} 
					 }); //close $.ajax(  													  
				});
									
	}	
	
	function loadPictures(targetURL){					
				dataItems = targetURL.split("/");						
				$("#right").fadeOut("slow",function(){
					$.ajax({ 
					method: "get", url: "right.php", data: 'id=' + dataItems[1] +'&l=' + dataItems[2], 
					beforeSend: function(){}, //show loading just when link is clicked 
					complete: function(){}, //stop showing loading when the process is complete 
					success: function(html){ //so, if data is retrieved, store it in html 
						$("#right").html(html); //show the html inside .content div 
						$("#right").fadeIn("slow"); //animation 					
					 } 
					 }); //close $.ajax(  													  
				});					
	}