﻿(function($){  
		$.fn.ProductImage = function() { 
  		var mainClass = ".image";
  		var thumbClass = ".imageThumb";
  		var imageClass = ".imageBig";
  		var titleClass = ".imageTitle";
  		var thumbFolder = "images/produkt/";
  		var imageFolder = "images/produkt/big/";
  		var images = $(mainClass);
  		var activeImage;
  			
			images.each(function(i) {
	  		registerEnlarge($(images[i]));
				registerShrink($(images[i]));
  		});
  		
			function registerEnlarge (image) {
 				 image.children(thumbClass).click(function() {
						enlargeImage(image);
  	 		});	
			}
			
 	   	function registerShrink (image) {
		     $(image).children(imageClass).click(function() {
						shrinkImage(image);
		  	 });    
		  }
		  
		  function enlargeImage (image) {
		  	 if(image == undefined) return;
				 $("#Main").height(($("#Main").height() + 590) + "px");
		  	 shrinkImage(activeImage);
		  	 activeImage = image;

				//load big image via ajax		  	 
		  	 var bigImage = $(image).children(imageClass);
         $(bigImage).load(function () {
             $(image).children(titleClass).before(this);
         }).error(function () {}).attr('src', imageFolder + $(image).children(thumbClass).attr('src').substring(thumbFolder.length, $(image).children(thumbClass).attr('src').length)).addClass('imageBig').height("400px").css('opacity', 1).show();

				 image.children(thumbClass).animate({ height: "400px", opacity: 0.9 }, 100);
         setTimeout(function(){  
				 			$(image).children(thumbClass).hide(0);
				 	  // use ajax instead
				 		//	$(image).children(imageClass).height("400px");
				 		//	$(image).children(imageClass).css('opacity', 1);
						//	$(image).children(imageClass).show(0);
				 			$(image).children(titleClass).fadeIn("slow");
				 			$(image).css("width", "1095px");
	        }, 101);  
		  }
		  
		  function shrinkImage (image) {
		  	 if(image == undefined) return;
				 $(image).children(titleClass).fadeOut(0);
				 $(image).children(imageClass).animate({ height: "150px", opacity: 0.9 }, 280);
				 setTimeout(function(){  
				 			$(image).children(imageClass).hide(0);
							$(image).children(imageClass).attr('src', $(image).children(thumbClass).attr('src'));
				 			$(image).children(thumbClass).height("150px");
				 			$(image).children(thumbClass).css('opacity', 1);
	            $(image).children(thumbClass).show(0);
	            $(image).css("width", "");
	            $("#Main").height(($("#Main").height() - 590) + "px");
	        }, 280);  
	        activeImage = undefined;
		  }
	};
})(jQuery); 
