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").live("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
    resizeScrollHandle();
	
	$("#UBox-Overlay").click(function(){
		$("#UBox-Overlay").css("left","-9999px");
		$("#UBox").css("left","-9999px");		
	});		
});

//Resize the scroll handle
function resizeScrollHandle() {
	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);		
}

// Reset the uBox
function setuBox(arguements) {
    var defaults = {
        source: "", // Source of the default display image
        caption: "", // Default caption
        isImageList: true, // Show a list or just a image
        getDataFrom: 'HTML_OBJ', // Get which source we use to generate the uBox. HTML_OBJ, ARRAY, AJAX
        selector: "img", // Selector to find the object in listObj
        listObj: $(document), // We will find the list of thumbnails in here using selector
        objArray: null, // Input an array for the images [{thumbnail: '', large: '', caption: ''}]
        ajaxUrl: "", // An Url to the ajax the return result should be array in the objArray format
        ajaxData: "productID=0" // data to send to the ajax
    };
    args = $.extend(defaults, arguements);
    
    // Set the main image
    $("#MainImageUBox").attr("src", args.source);
    $("#Pic-Title #Pic-Description").text(args.caption);
    
    // Get the list of image out
    if (args.getDataFrom == 'HTML_OBJ') {
        var listImg = args.listObj.find(args.selector);
        // From the list of image create the list of image for the navigation
        generateThumbnailsListFromHTML_OBJ(listImg);
    }
    else if (args.getDataFrom == 'ARRAY') {
        generateThumbnailsListFromARRAY(args.objArray);
    }
    else if (args.getDataFrom == 'AJAX') {
        generateThumbnailsListFromAJAX(args.ajaxUrl, args.ajaxData);
    }    
}

function ChangePicList(html, itemCount) {
    // Put the picture list HTML into the form
    $("#UBox #Nav-PicContainer .Nav-PicList").html(html);
    $("#UBox #Nav-PicContainer .Nav-PicList").width(itemCount * ($(".Nav-PicList a").width() + 6));
    resizeScrollHandle();
    resetScrollBar();
    $("#UBox #Nav-PicContainer .Nav-PicList").css("left", "0px");
}

// From the list of image obj create the list of image for the navigation
function generateThumbnailsListFromHTML_OBJ(listImg) {
    var picListHtml = "";
    var itemCount = listImg.length;
    // From the list of image create the list of image for the navigation
    $.each(listImg, function() {
        var title = $(this).attr("title");
        var url = $(this).attr("rel");
        picListHtml += "<a rel='uBox' title='" + $(this).attr("title") + "' href='" + $(this).attr("rel") + "'>";
        picListHtml += "<img src='" + $(this).attr("src") + "' alt='" + $(this).attr("title") + "' /></a>";
    });
    ChangePicList(picListHtml, itemCount);
}
// From the array create the list of image for the navigation
function generateThumbnailsListFromARRAY(objArray) {
    var picListHtml = "";
    itemCount = objArray.length;
    for ( var idx = 0; idx < itemCount; idx++){
        picListHtml += "<a rel='uBox' title='" + objArray[idx].caption + "' href='" + objArray[idx].large + "'>";
        picListHtml += "<img src='" + objArray[idx].thumbnail + "' alt='" + objArray[idx].caption + "' /></a>";
    }
    ChangePicList(picListHtml, itemCount);
}
// From the ajax link create the list of image for the navigation
function generateThumbnailsListFromAJAX(url, data) {
    var picListHtml = "";
    var objArray;
    $.ajax({
        type: "GET",
        url: url,
        data: data,
        success: function(msg) {
            objArray = eval(msg);
            itemCount = objArray.length;
            generateThumbnailsListFromARRAY(objArray);           
        }
    });
}

function resetScrollBar() {
    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
        });
    }
}

//When the uBox trigger
function triggeruBox(e) {			
	$("#UBox-Overlay").css("left","0px");
	$("#UBox").css("left","0px");
	$("#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");
	resetScrollBar();
	$("#Pic-Description").text($(".Nav-PicList a").eq(0).attr("title"));
	if(e)
	{
		e.preventDefault();
    }
}