var i = 1;

var oWidth;
var oHeight;

function changeImage(src) {
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',"img/products/"+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;
	});
}
}


var left = false;
var time = 5000;
var productwidth = 110;
var product_nr;
var box_width;

function rollProducts(direction) {
	
	if ( direction == null) {
	box_width = parseInt($("#product_roll").css('width'));
	if  (product_nr*productwidth < box_width) return;
	$(document).everyTime(time, function () {
		var pl = parseInt($("#product_rolled").css('left'));
		
		if (!left && pl > 0) { 
			left = true;
		}
		if (left && pl < -product_nr*productwidth+box_width) left= false;
		$("#product_rolled").animate({left: (left ? "-=" : "+=") + productwidth + "px"}, 1000);
	});
	} else {
	var pl = parseInt($("#product_rolled").css('left'));
	
	if (direction == "right") {
		if (pl < -product_nr*productwidth+box_width) return;
		left = true;
		$("#product_rolled").animate({left: (left ? "-=" : "+=") + productwidth + "px"}, 1000);
	} else if(direction == "left") {
		if (pl > 0) return;
		left = false;
		$("#product_rolled").animate({left: (left ? "-=" : "+=") + productwidth + "px"}, 1000);
	}
	}
}