///Image Rotator Requires jquery

// Set Image Rotation speed (in seconds)
var speed = 5;

// the following arrays are generated in the view by silverstripe
// var images = new Array();
// images[0] = "images/scentsations-lotions-apple-cinnamon.jpg";
// images[1] = "images/scentsations-lotions-birch-mint.jpg";
// images[2] = "images/scentsations-lotions-black-cherry.jpg";
// images[3] ... etc

// var image_ids = new Array();
// image_ids[0] = 5;
// image_ids[1] = 6;
// image_ids[2] = 245;
// etc....



var i = 0;
var j = i + 1;
var strImg = '';
var hover = false;

function rotateImages() {

	$("#product-img" + image_ids[i]).fadeOut("slow");
	$("#product-img" + image_ids[j]).fadeIn("slow");

	if (hover == false) {
		$("#" + image_ids[i]).css("font-weight", "normal");
		$("#" + image_ids[i]).css("background-image", "none");
		$("#" + image_ids[j]).css("font-weight", "bold");
		$("#" + image_ids[j]).css("background-image", "url(/themes/cnd/images/arrow-next.gif)");
	}

	if (i < image_ids.length - 1) {
		i++;
	} else {
		i = 0;
	}

	if (i < image_ids.length - 1) {
		j = i + 1;
	} else {
		j = 0;
	}

	setTimeout("rotateImages()",speed * 1000);
}



$(document).ready(function(){	

	//console.log("image_ids: "+image_ids);

	$("#product-img"+image_ids[0]).css("display", "");
	$("#"+image_ids[0]).css("font-weight", "bold");
	$("#"+image_ids[0]).css("background-image", "url(/themes/cnd/images/arrow-next.gif)");
	
	setTimeout("rotateImages()",speed * 1000);

	$("li.flavours").hover(

		function () { // mouseover
			hover = true;
			$("#product-img-hover").attr("src",$("#product-img"+this.id).attr("src"));
			$("#product-img-hover").css("display", "");
			$("#" + image_ids[i]).css("font-weight", "normal");
			$("#" + image_ids[i]).css("background-image", "none");
			$(this).css("font-weight", "bold");
			$(this).css("background-image", "url(/themes/cnd/images/arrow-next.gif)");
      	}, 

      	function () { // mouseout
			for (x = 0; x < image_ids.length; x++) {
				$("#product-img" + image_ids[x]).css("display", "none");
				$("#" + image_ids[x]).css("font-weight", "normal");
				$("#" + image_ids[x]).css("background-image", "none");
			}

			$("#" + image_ids[i]).css("font-weight", "bold");
			$("#" + image_ids[i]).css("background-image", "url(/themes/cnd/images/arrow-next.gif)");
			$("#product-img" + image_ids[i]).css("display", "");
			$("#product-img-hover").css("display", "none");
			hover = false;
      	}

    );

});