function setToGrayScale() {

	$jq("#featured .thumbs li img").each(function() {
		gsUrl = $jq(this).attr("grayscale");
		$jq(this).attr("src",gsUrl);
	});

}



$jq(document).ready(function() {
	
	var imgPrevWidth = 512;
	var imgDescHeight = 205; 
	var press = 0;
	

	$jq(".img-prev .view-feature-image-preview li:first-child").addClass("first-img");//identify the first and last images
   	$jq(".img-prev .view-feature-image-preview li:last-child").addClass("last-img");
   	$jq(".img-prev .view-feature-image-preview li.first-img").clone().appendTo(".img-prev .view-feature-image-preview ul");//clone the first image and put it at the end
   	$jq(".img-prev .view-feature-image-preview li.last-img").clone().prependTo(".img-prev .view-feature-image-preview ul");//clone the last image and put it at the front
	$jq(".img-prev .view-feature-image-preview ul").css({"margin-left":"-"+imgPrevWidth+"px"});	

	$jq(".description-list .view-featured-products li:first-child").addClass("first-desc");//identify the first and last images
   	$jq(".description-list .view-featured-products li:last-child").addClass("last-desc");
   	$jq(".description-list .view-featured-products li.first-desc").clone().appendTo(".description-list .view-featured-products ul");//clone the first image and put it at the end
   	$jq(".description-list .view-featured-products li.last-desc").clone().prependTo(".description-list .view-featured-products ul");//clone the last image and put it at the front
	$jq(".description-list .view-featured-products ul").css({"margin-top":"-"+imgDescHeight+"px"});	


	/// Set colored and Grayscale images

	$jq("#featured .thumbs li img").each(function() {

		var eachImg = $jq(this).attr("src").substring($jq(this).attr('src').lastIndexOf('/') +1 );
		var coloredImg = "http://crystalaudio.ph/sites/default/files/styles/featured_thumbnail/public/"+eachImg;
		var gsImg = "http://crystalaudio.ph/sites/default/files/styles/featured_thumbnail_desaturate/public/"+eachImg;
		$jq(this).attr("colored",coloredImg);
		$jq(this).attr("grayscale",gsImg);

	});

	/// Add class active to first thumbnail and set the image to colored

	$jq("#featured .thumbs li:first-child").addClass("active");
	$jq("#featured .thumbs li:first-child img").attr("src",$jq("#featured .thumbs li:first-child img").attr("colored"));

	/// Thumbnail click function

	$jq("#featured .thumbs li").click(function() {

		$jq("#featured .thumbs li").removeClass("active");
		$jq(this).addClass("active");

		var productNum = $jq(this).index() + 1;
		var coloredUrl = $jq(this).find("img").attr("colored");
		press = $jq(this).index();
		setToGrayScale();

		$jq(this).find("img").attr("src",coloredUrl);		


		/// Animate

		$jq(".img-prev ul").stop().animate({
			"margin-left": "-"+512*productNum
		},1e3, "easeInOutExpo");

		$jq(".description-list ul").stop().animate({
			"margin-top": "-"+205*productNum
		},1e3, "easeInOutExpo", function() {
			$jq(".pType").animate({
				"bottom": "0px"
			});
		});

		$jq(".pType").animate({
			"bottom": "-59px"
		});

	});

	
	/// Thumbnails arrows function

	var thumbPress = 0;
	var productCount = $jq(".view-featured-thumbnails li").length;
	var maxPress = productCount - 4;
	
	if(productCount < 5) {
		$jq("#featured .arrow").hide();
	}

	$jq("#featured .next").click(function(){

		if(thumbPress < maxPress) {

			$jq("#featured .thumbs ul").animate({
				"margin-left":"-=99"
			});

			thumbPress++;

		}

	});

	$jq("#featured .prev").click(function(){

		if(thumbPress >= 1) {

			$jq("#featured .thumbs ul").animate({
				"margin-left":"+=99"
			});

			thumbPress--;

		}

	});


	/// Autoscroll Function

	autoSlide = setInterval(function() {
		autoPlay();
	}, 1e4);

	function autoPlay() {

		/// Set the position back

		if(press == productCount) {
			$jq(".img-prev ul").css("margin-left","-"+imgPrevWidth+"px");
			$jq(".description-list ul").css("margin-top","-"+imgDescHeight+"px");

			press = 0;

		}


		/// Animate

		$jq(".img-prev ul").stop("true","true").animate({
			"margin-left":"-="+imgPrevWidth
		}, 1e3, "easeInOutExpo");


		$jq(".description-list ul").stop("true","true").animate({
			"margin-top": "-="+imgDescHeight
		},1e3, "easeInOutExpo", function() {
			$jq(".pType").animate({
				"bottom": "0px"
			});

		})


		$jq(".pType").animate({
			"bottom": "-59px"
		});

		

		/// Thumbnail active function

		if(press == productCount-1) {

			$jq(".thumbs li").removeClass("active");
			$jq(".thumbs li:first-child").addClass("active");
			$jq(".thumbs li:first-child").find("img").attr("src",$jq(".thumbs li:first-child").find("img").attr("colored"));
			$jq(".thumbs li:last-child").find("img").attr("src",$jq(".thumbs li:last-child").find("img").attr("grayscale"));

		} else {

			$jq(".thumbs .active").next().addClass("active");
			$jq(".thumbs .active").prev().removeClass("active");
			$jq(".thumbs .active").find("img").attr("src",$jq(".thumbs .active").find("img").attr("colored"));
			$jq(".thumbs .active").prev().find("img").attr("src",$jq(".thumbs .active").prev().find("img").attr("grayscale"));

		}
		
		if(press == productCount-1) {
			
			$jq("#featured .thumbs ul").animate({
				"margin-left":"0"
			}, 1e3, "easeInOutExpo");

			thumbPress = 0;	
			
		} else if(press >= thumbPress && thumbPress < maxPress) {
			
			$jq("#featured .thumbs ul").animate({
				"margin-left":"-=99"
			}, 1e3, "easeInOutExpo");

			thumbPress++;
			
		}

		press++;


	}
	

});