function asyncLoadImage(imgObjID, src) {
    var imgTemp = new Image();
    $(imgTemp).load(function() { onImageDownloaded(imgObjID, src); });
    imgTemp.src = src;
}
function onImageDownloaded(imgObjID, src) {
    slide = $("#" + imgObjID)[0];
    slide.src = src;
    slide.attributes["loadStatus"].value = "loaded";
    eval("var slideShow = $('#" + slide.parentNode.id + "');");
    var currSlideImg = slideShow.contents()[slideShow.data('cycle.opts').currSlide];
    var currSlideSrc
    var typeNo = slide.parentNode.attributes['typeNo'].value;
    if (currSlideImg.attributes) {
        if (typeNo == "1") {
            currSlideSrc = slideBaseUrl + 'Mug.aspx?Type=1&UID=' + currSlideImg.attributes['uid'].value + "&ss=1";
        } else {
            currSlideSrc = slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + currSlideImg.attributes['imageID'].value + "&ss=1";
        }
        if (src == currSlideSrc) {
            var imgTemp = new Image();
            imgTemp.id = "centerMe";
            imgTemp.src = src;
            centerSlide($('#' + currSlideImg.id), imgTemp.width, imgTemp.height, 1);
        }
    }
}
//hide all but the first image when page loads
$(document).ready(function() {
    $('.mugs').find('img:gt(0)').hide();
});
//callback fired when each slide transition begins
function onBeforeMugSlide(curr, next, opts) {
    var slideshowDiv = curr.parentNode;
    //should take care of loading first slide (all others should be loaded in the onAfterMugLoad function)
    if (next.attributes["loadStatus"].value == "unloaded") {
        next.attributes["loadStatus"].value = "loading";
        var typeNo = slideshowDiv.attributes['typeNo'].value;
        var scaleImages = slideshowDiv.attributes['scale'] ? slideshowDiv.attributes['scale'].value : "1";
        if (typeNo == "1") {
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=1&UID=' + next.attributes['uid'].value + "&ss=" + scaleImages);
        } else{
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + next.attributes['imageID'].value + "&ss=" + scaleImages);
        }
    }
    eval(slideshowDiv.id + '_PreLoad(next);');
//    var imgTemp = new Image();
//    imgTemp.id = "centerMe";
//    imgTemp.src = next.src;
//    centerSlide($(next), imgTemp.width, imgTemp.height);
};
//callback fired when each slide transition ends
function onAfterMugSlide(curr, next, opts) {
    var slideshowDiv = curr.parentNode;
    if (next.attributes["loadStatus"].value == "unloaded") {
        next.attributes["loadStatus"].value = "loading";
        var typeNo = slideshowDiv.attributes['typeNo'].value;
        var scaleImages = slideshowDiv.attributes['scale'] ? slideshowDiv.attributes['scale'].value : "1";
        if (typeNo == "1") {
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=1&UID=' + next.attributes['uid'].value + "&ss=" + scaleImages);
        } else{
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + next.attributes['imageID'].value + "&ss=" + scaleImages);
        }
    }
};

function centerSlide(slide, originalWidth, originalHeight, firstLoad) {
//hate to see this go, but the auto-resizing function should take care of this problem.
//    var adjustedWidth;
//    var adjustedHeight;
//    if (originalWidth > 100) {
//        adjustedWidth = 100;
//        adjustedHeight = (originalHeight * 100) / originalWidth;
//    } else {
//        adjustedWidth = originalWidth;
//        adjustedHeight = originalHeight;
//    }
//    var pos = slide.css("position");
//    var display = slide.css("display");
//    var top = slide.css("top");
//    var left = slide.css("left");
//    slide.css({
//        marginTop: Math.floor((125 - adjustedHeight) / 2),
//        marginLeft: Math.floor((100 - adjustedWidth) / 2)
//    });
//    if (firstLoad == 1) {
//        slide[0].attributes["cycleH"].value = Math.floor(adjustedHeight);
//        slide[0].attributes["cycleW"].value = Math.floor(adjustedWidth);
//        //slide[0].style.width = Math.floor(adjustedWidth) + "px";
//        //slide[0].style.height = adjustedHeight + "px";
//        //slide.css({
//        //    width: adjustedWidth,
//        //    height: adjustedHeight
//        //});
//    }
}