var i = 1;

var oWidth;
var oHeight;

function changeImage(src, path) {
var path = (path == null) ? "img/products/" : path;

if ( i == 0 ) return;
else if ( i == 1 ) {
	i = 0;	
	$("body").append("<div id=divslika onclick='changeImage();'><img id=slika src=''><div>");
	$("#slika").css('visibility','hidden');
	$("#divslika").css('visibility', 'hidden');
	$("#slika").attr('src',path+src).load(function () {
		i = 3;
		oWidth=$("#slika").width();
		oHeight=$("#slika").height();
		$("#slika").width(0);
		$("#slika").height(0);
		$("#slika").css('visibility','visible');
		$("#divslika").css('visibility', 'visible');
		$("#slika").animate({width: oWidth+"px", height: oHeight + "px"}, 1000);
		$("#divslika").animate({width: oWidth+"px", height: oHeight + "px", left: "-="+oWidth/2+"px", top: "-="+oHeight/2+"px"}, 1000);
		$(document).oneTime(1000, function() {
			i = 2;
		});
	
	});
	$(document).oneTime(1000, function() {
		if (i == 3) return;
		oWidth=$("#slika").width();
		oHeight=$("#slika").height();
		$("#slika").width(0);
		$("#slika").height(0);
		$("#slika").css('visibility','visible');
		$("#divslika").css('visibility', 'visible');
		$("#slika").animate({width: oWidth+"px", height: oHeight + "px"}, 1000);
		$("#divslika").animate({width: oWidth+"px", height: oHeight + "px", left: "-="+oWidth/2+"px", top: "-="+oHeight/2+"px"}, 1000);
		$(document).oneTime(1000, function() {
			i = 2;
		});
	});
	
} else if (i == 2){
	i = 0;
	$("#slika").animate({width: "0px", height: "0px"}, 1000);
	$("#divslika").animate({width: "0px", height: "0px", left: "+="+oWidth/2+"px", top: "+="+oHeight/2+"px"}, 1000);
	$(document).oneTime(1000, function() {
		$("#divslika").remove();
		i = 1;
	});
}
}