var slideshowspeed=1500;
var count;
var slideShowTimeout;
var image_name;
var original_image_src;
var slideimages=new Array();
var keyID;

/* the elements in this array correspond to the images in slideimages array.  the elements are sku_ids. */
var skuimages;


function startSlideShow(key_id, element_name_to_switch, images_to_show) {
	
	/* "product_ids" is set in "first_level_cat_body.jsp" */
	for (i = 0; i < product_ids.length; i++) {
		if(document.getElementById('shoepopup_' + product_ids[i])){
			document.getElementById('shoepopup_' + product_ids[i]).style.display = 'none';
			
			/* In ie, we need to set all product li position to 'static', and the element we are showing in the slideshow  to 'relative', so that the image overlay on top off everything */
			document.getElementById('li_' + product_ids[i]).style.position = 'static';
		}
	}
	
	/* cancel the slide show, incase we didnt do it yet */
	clearTimeout(slideShowTimeout);

	if (!document.images)
		return;
		
	count = 0;
	keyID = key_id;
	image_name = element_name_to_switch;
	
	var shoe_popup = document.getElementById('shoepopup_' + key_id);
	shoe_popup.style.display = 'block';
	
	/* In ie, we need to set all product li position to 'static', and the element we are showing in the slideshow  to 'relative', so that the image overlay on top off everything */
	var li_product = document.getElementById('li_' + key_id);
	li_product.style.position = 'relative';
	
	
	//store the original image to switch back when onmouseout
	var original_image = eval('document.images.' + image_name);
	original_image_src = original_image.src;
	
	loadSlides(images_to_show);
	
	slideit();

}

//{"sandalImages": [{"src": "PRIVMSG", 'sku_id':'45'},{"src": "PRIVMSG", 'sku_id':'553'},{"src": "PRIVMSG", 'sku_id':'883'}]};

function loadSlides(images_to_show) {

	var myJSONObject = eval('(' + images_to_show + ')');
	slideimages=new Array();
	skuimages = new Array();
	for (i = 0; i < myJSONObject.sandalImages.length; i++) {
		slideimages[i]=new Image();
		slideimages[i].src=myJSONObject.sandalImages[i].src;
		skuimages[i] = myJSONObject.sandalImages[i].sku_id;
	}
}

function slideit() {
	var element = eval('document.images.' + image_name);
	if(element) {
		element.className="";
		element.src=slideimages[count].src;
		//element.id = "pp_" + keyID;
		element.className="product";
		//element.style.border="1px solid green";
	}
	
	var productPopupLinkEl = document.getElementById('shoepopup_a_' + keyID);
	if (productPopupLinkEl) {
		var shref = productPopupLinkEl.href;
		
		if (shref.indexOf('s=') > -1) {
			shref = shref.substring(0, shref.indexOf('s='));
			shref += 's=' + skuimages[count];
		} else {
			if (shref.indexOf('?') > -1) {
				shref += '&s=' + skuimages[count];
			} else {
				shref += '?s=' + skuimages[count];
			}
		}
			
		productPopupLinkEl.href = shref;
	}
	
	if (count < slideimages.length-1) {
		count++;
	} else {
		count=0;	
	}
	
	slideShowTimeout = setTimeout(slideit ,slideshowspeed);
}

function cancelSlideShow() {
	
	clearTimeout(slideShowTimeout);

	var shoe_popup = document.getElementById('shoepopup_' + keyID);
	shoe_popup.style.display = 'none';

	//show the original image
	var original_image = eval('document.images.' + image_name);
	original_image.src = original_image_src;
}

/**
*	This function is only called for people viewing the page in IE
*	which is triggered from file iepng.htc
*	When the png image is processed, it is clickable,
*   so we are going to redirect for the user when we detect user click.
*/
function goToPage(id_name) {
	
	if (id_name == 'shoepopup_' + keyID) {
		var a = document.getElementById('shoepopup_a_' + keyID);
		window.location = a.href;
	}
}