function asyncLoadImage(imgObjID, src, scaleImages) {
    var imgTemp = new Image();
    $(imgTemp).load(function () { onImageDownloaded(imgObjID, src, scaleImages); });
    imgTemp.src = src;
}
function onImageDownloaded(imgObjID, src, scaleImages) {
    slide = $("#" + imgObjID)[0];
    slide.src = src;

    var imgTemp = new Image();
    imgTemp.src = src;
    var newImgWidth = $(imgTemp).attr('width');
    if (scaleImages == "0") {
        $(slide).attr('width', newImgWidth).css('width', newImgWidth);
    }

    eval("var slideShow = $('#" + slide.parentNode.id + "');");
    if (slideShow.data('cycle.opts')) {
        var currSlideImg = slideShow.contents()[slideShow.data('cycle.opts').currSlide];
        if (currSlideImg.id == imgObjID && scaleImages == "0") {
            //resize on the fly instead of in pre-load (already called) when current image has just been downloaded
            slideShow.attr('width', newImgWidth).css('width', newImgWidth);
        }
    }
    slide.attributes["loadStatus"].value = "loaded";
    //    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=" + scaleImages;
    //        } else {
    //            currSlideSrc = slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + currSlideImg.attributes['imageID'].value + "&ss=" + scaleImages;
    //        }
    //        if (src == currSlideSrc) {
    //            //imgTemp.id = "centerMe";
    //            //centerSlide($('#' + currSlideImg.id), imgTemp.width, imgTemp.height, 1);
    //            slideShow.attr('width', newImgWidth).css('width', newImgWidth);
    //        }
    //    }
}
//hide all but the first image when page loads
$(document).ready(function () {
    $('.mugs').find('img:gt(0)').hide();
    $(".mugs[autoLoadAll='1'] img[loadStatus='unloaded']").each(function (index, element) {
        $(element).attr('loadStatus', 'loading');
        var slideshowDiv = element.parentNode;
        var typeNo = slideshowDiv.attributes['typeNo'].value;
        var scaleImages = slideshowDiv.attributes['scale'] ? slideshowDiv.attributes['scale'].value : "1";
        if (typeNo == "1") {
            asyncLoadImage(element.id, slideBaseUrl + 'Mug.aspx?Type=1&UID=' + element.attributes['uid'].value + "&ss=" + scaleImages, scaleImages);
        } else {
            asyncLoadImage(element.id, slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + element.attributes['imageID'].value + "&ss=" + scaleImages, scaleImages);
        }
    });
});
//callback fired when each slide transition begins
function onBeforeMugSlide(curr, next, opts) {
    var slideshowDiv = curr.parentNode;
    var scaleImages = slideshowDiv.attributes['scale'] ? slideshowDiv.attributes['scale'].value : "1";
    //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;
        if (typeNo == "1") {
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=1&UID=' + next.attributes['uid'].value + "&ss=" + scaleImages, scaleImages);
        } else {
            asyncLoadImage(next.id, slideBaseUrl + 'Mug.aspx?Type=' + typeNo + '&ImageID=' + next.attributes['imageID'].value + "&ss=" + scaleImages, scaleImages);
        }
    }
    if (scaleImages == "0") {
        $(slideshowDiv).attr('width', $(next).css('width')).css('width', $(next).css('width'));
    }
    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
    //        //});
    //    }
}