// On page load link the slide show extender to thumbnails
function pageLoad() {
	var slide = $find(GetClientId("slideShowExtender1"));
	//Image1.Attributes.Add("onclick", script);
	$addHandler($find(GetClientId("slideShowExtender1"))._elementImage, "click", imageclick);
	$addHandler($find(GetClientId("slideShowExtender1"))._elementImage, "mouseover", function() { this.style.cursor = 'pointer'; });
	$addHandler($find(GetClientId("slideShowExtender1"))._elementImage, "mouseout", function() { this.style.cursor = 'auto'; });
	slide.add_slideChanging(configurestyle);
}

//To add a URL to the image on the click event
function imageclick(sender, e) {
	var url = $find(GetClientId("slideShowExtender1"))._slides[$find(GetClientId("slideShowExtender1"))._currentIndex].Name;
	window.open(url, "_self");
}

//Configure the slide style in the auto play mode
function configurestyle(sender, args) {
	var idx = args.get_slideIndex();
	// Specify your condition over here
	var thumbnail = 'ImageThumb' + idx;
	configure(thumbnail, "current");
	configurepreviousnextimages(idx);
	if (idx != 0) {
		var prevthumbnail = 'ImageThumb' + (idx - 1);
		configure(prevthumbnail, "");
	}
	else {
		var prevthumbnail = 'ImageThumb' + (sender._slides.length - 1);
		configure(prevthumbnail, "");
	}
//	if (sender._inPlayMode)
//		scrollPics();
}

// Stop the slideshow
function stop() {
	var s = $find(GetClientId("slideShowExtender1"));
	if (s._inPlayMode)
		s._play();
}

//Auto play
function autoplay() {
	var s = $find(GetClientId("slideShowExtender1"));
	if (!s._inPlayMode)
		s._play();
}

//Configure the slideshowextenders next slide
function nextslide() {
	var slider1 = $find(GetClientId("slideShowExtender1"));
	var idx = slider1._currentIndex;
	var thumbnail = 'ImageThumb' + idx;
	configure(thumbnail, "");
	var currentIndex = idx + 1;
	if (currentIndex == slider1._slides.length)
		currentIndex = 0
	slider1._currentIndex = currentIndex;
	slider1.setCurrentImage();
	var currentthumbnail = 'ImageThumb' + currentIndex;
	configure(currentthumbnail, "current");
	//scrollPics();
	//Newly added
	configurepreviousnextimages(currentIndex)
}

//Configure the slideshowextenders previous slide
function previousslide() {
	var slider1 = $find(GetClientId("slideShowExtender1"));
	var idx = slider1._currentIndex;
	var thumbnail = 'ImageThumb' + idx;
	configure(thumbnail, "");
	var currentIndex = idx - 1;
	if (currentIndex == -1)
		currentIndex = slider1._slides.length - 1
	slider1._currentIndex = currentIndex;
	slider1.setCurrentImage();
	var currentthumbnail = 'ImageThumb' + currentIndex;
	configure(currentthumbnail, "current");
	//alert(currentthumbnail);
	//scrollPics();
	//Newly added
	configurepreviousnextimages(currentIndex)
}

//Configure the slideshowextenders  slide from thubnails
function changeImage(iIndex) {
	var slider1 = $find(GetClientId("slideShowExtender1"));
	var idx = slider1._currentIndex;
	var thumbnail = 'ImageThumb' + idx;
	configure(thumbnail, "");
	var imageIndex=iIndex;
	slider1._currentIndex = imageIndex;
	slider1.setCurrentImage();
	var currentIndex = slider1._currentIndex;
	var currentthumbnail = 'ImageThumb' + currentIndex;
	configure(currentthumbnail, "current");
	configurepreviousnextimages(imageIndex)
	//scrollPics();
}

//Configure thumbnails style
function configure(controlname, style) {
	var imagecontrol = document.getElementById(controlname);
	imagecontrol.setAttribute("class", style);
	imagecontrol.setAttribute("className", style);
}

//Configure thumbnails style
function configurepreviousnextimages(idx) {
	var slider1 = $find(GetClientId("slideShowExtender1"));
	var previmagecontrol = document.getElementById("PreviousSlideImage");
	var prevpagecontrol = document.getElementById("PreviousPageImage");
	var nextimagecontrol = document.getElementById("NextSlideImage");
	var nextpagecontrol = document.getElementById("NextPageImage");
	if (idx == 0) {
		previmagecontrol.setAttribute("src", path + "hme-panel-prev-off.gif");
		prevpagecontrol.setAttribute("src", path + "pgn-prev-off.gif");
	}
	else {
		previmagecontrol.setAttribute("src", path + "hme-panel-prev.gif");
		prevpagecontrol.setAttribute("src", path + "pgn-prev-on.gif");
	}
	if (idx== slider1._slides.length - 1) {
		nextimagecontrol.setAttribute("src", path + "hme-panel-next-off.gif");
		nextpagecontrol.setAttribute("src", path + "pgn-next-off.gif");
	}
	else {
		nextimagecontrol.setAttribute("src", path + "hme-panel-next.gif");
		nextpagecontrol.setAttribute("src", path + "pgn-next-on.gif");
	}
}



//Scroll Thumbnails with magical smallimagewidth
//var m = 0;
//var smallimagewidth = -116;
var path="/Images/";
//function scrollPics() {
//	var slider1 = $find(GetClientId("slideShowExtender1"));
//	var idx = slider1._currentIndex;
//	var m = (Math.floor(idx / 4) * 4 * smallimagewidth);
//	document.getElementById('div1').style.left = m + 'px';
//	configurepreviousandnextsetimages(m);
//	m = m + (Math.floor(idx / 4) * 4 * smallimagewidth);
//	if (m == (slider1._slides.length * smallimagewidth)) {
//		m = 0;
//	}
//	
//}

////Scroll thumbnails 4 at a time to the left
//function previousset() {
//	var newm = document.getElementById('div1').style.left;
//	var removepx = newm.indexOf("px");
//	newm = newm.substring(0, removepx);

//	newm = parseInt(newm) - (4 * smallimagewidth);
//	if (newm > 0)
//		newm = 0;
//	document.getElementById('div1').style.left = newm + "px";
//	configurepreviousandnextsetimages(newm);
//}

////Scroll thumbnails 4 at a time to the right
//function nextset() {
//	var slider1 = $find(GetClientId("slideShowExtender1"));
//	var newm = parseInt(document.getElementById('div1').style.left);
//	newm = newm + (4 * parseInt(smallimagewidth));
//	if (newm <= (slider1._slides.length * smallimagewidth))
//		newm = (Math.floor((slider1._slides.length-1)/ 4) * 4 * smallimagewidth);
//	document.getElementById('div1').style.left = newm + "px";
//	configurepreviousandnextsetimages(newm);
//	
//}

////Configure the left and right hand scrolling images for the thumbnails
//function configurepreviousandnextsetimages(m) {
//	var slider1 = $find(GetClientId("slideShowExtender1"));
//	var previmagecontrol = document.getElementById("PreviousSetImage");
//	var nextimagecontrol = document.getElementById("NextSetImage");
//	previmagecontrol.setAttribute("src", path + "pgn-prev-on.gif");
//	nextimagecontrol.setAttribute("src", path + "pgn-next-on.gif");
//	if (m == 0) {
//		previmagecontrol.setAttribute("src", path + "pgn-prev-off.gif");
//	}
//	if (m == (Math.floor((slider1._slides.length - 1) / 4) * 4 * smallimagewidth) || m == (slider1._slides.length * smallimagewidth)) {
//		nextimagecontrol.setAttribute("src", path + "pgn-next-off.gif");
//	}
//}