var currentIDX = 0; //Current idx image
	
$(window).load(function(){
	//Hover effect for Prev and Next button
	$("#UBox-PicDisplay #Pic-Prev, #UBox-PicDisplay #Pic-Next").hover(function(){
		$(this).animate({opacity: 1},300);
	},function(){
		$(this).stop(false, false);
		$(this).animate({opacity: 0.3}, 300);
	});		
		
	//When click on the small image
	$(".Nav-PicList a").click(function(e){
		var link = $(this).attr("href");
		var title = $(this).attr("title");
		currentIDX = $(".Nav-PicList a").index(this);
		$("#Pic-Title").animate({"top": "-20px"}, 200, function(){
			$("#MainImageUBox").ImageSwitch({NewImage:link, EffectOriginal: false, ExtraStyle: "z-index:100000"}, function(){
				$("#Pic-Title").animate({"top": "0px"}, 200);
			});
			$("#Pic-Description").text(title);
		});
		e.preventDefault();
	});	
	
	//Set the opacity down for the prev and next button
	$("#UBox-PicDisplay #Pic-Prev").css("opacity", 0.3);
	$("#UBox-PicDisplay #Pic-Next").css("opacity", 0.3);		
	
	//When user click on the prev button
	$("#UBox-PicDisplay #Pic-Prev").click(function(){
		if(currentIDX > 0){
			currentIDX -= 1;
			$(".Nav-PicList a").eq(currentIDX).trigger("click");
		}
	});
	
	//When user click on the prev button
	$("#UBox-PicDisplay #Pic-Next").click(function(){
		if(currentIDX < $(".Nav-PicList a").length-1)
		{
			currentIDX += 1;
			$(".Nav-PicList a").eq(currentIDX).trigger("click");			
		}		
	});
	
	//When user click on close button
	$("#UBox-PicDisplay #Pic-Close").click(function(){
		$("#UBox-Overlay").css("left","-9999px");
		$("#UBox").css("left","-9999px");			
	});

	//Resize the scroll handle
	var PicListWidth = $(".Nav-PicList a").length * ($(".Nav-PicList a").width()+6);
	$(".Nav-PicList").css("width", PicListWidth + "px")
	if(PicListWidth < $("#Nav-PicContainer").width())
	{
	    var properSize = $("#UBox-Navigation #Slider-Bar").width() /1 - 14;
	}
	else
	{
	    var properSize = $("#UBox-Navigation #Slider-Bar").width() / 
		    ( PicListWidth / 
			$("#Nav-PicContainer").width() );					
	}
	$("#Slider-Handle").css("width", properSize+12);				
	$("#Slider-Handle").css("left", 0);
    $("#Slider-Handle #Body-Bar").css("width", properSize);				
	
	$("#UBox-Overlay").click(function(){
		$("#UBox-Overlay").css("left","-9999px");
		$("#UBox").css("left","-9999px");		
	});		
});

//When the uBox trigger
function triggeruBox(e) {			
	$("#UBox-Overlay").css("left","0px");
	$("#UBox").css("left","0px");
	$("#MainImageUBox").attr("src", $(".prod-ubox-default-img").attr("value"));
	$("#UBox-Overlay").height($(document).height());
	//Find the top position to vertical center the uBox and align center
	var posibleTop = ($(window).height() - $("#UBox").height())/2;
	if (posibleTop<0) posibleTop = 0;
	$("#UBox").css("top", ($(window).scrollTop() + posibleTop)+"px");	
	$("#UBox").css("left", (($(window).width() - $("#UBox").width())/2)+"px");	
	var PicListWidth = $(".Nav-PicList a").length * ($(".Nav-PicList a").width()+6);
	if(PicListWidth > $("#Nav-PicContainer").width()){
		//Set the scroller to control the image list
		$("#Slider-Bar #Slider-Handle").grpScroll({
			ParentBar: $("#ThumbnailControls #Slider-Bar"),
			AssociatedObject: $(".Nav-PicList"),
			ViewWidth: $("#Nav-PicContainer").width(),
			PrevControl: $("#Nav-Back"),
			PrevValue: 80,
			NextControl: $("#Nav-Forward"),
			NextValue: 80
		});	
	}
	$("#Pic-Description").text($(".Nav-PicList a").eq(0).attr("title"));
	if(e)
	{
		e.preventDefault();
    }
}