﻿function spvDraw(query) {
    if ((query) && (query.length > 0)) {

        var curSelected = 0;
        var attrCurSelected = query.attr("curSelected");
        if (attrCurSelected) {
            curSelected = attrCurSelected;
        }
        var children = query.children();
        var alImages = new Array();
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            alImages.push($(child).html());

        }

        if (curSelected >= alImages.length) {
            curSelected = 0;
        }

        if (alImages.length > 0) {

            var mainImage = $("#solutionMainImage");
            mainImage.css("display", "inline");
            mainImage.attr("src", alImages[curSelected]);
            

            var imgCount = 1;
            for (var i = 1; i < alImages.length; i++) {
                
                if ((curSelected != i) && (imgCount < 4)) {
                    var thumbName = "#solutionThumb" + (imgCount);
                    var thumbImage = alImages[i].replace(".png", "_thumb.png");
                    var thumb = $(thumbName);
                    thumb.attr("thumIndex", imgCount);
                    thumb.attr("src", thumbImage);
                    thumb.attr("rootID", query.attr("id"));
                    thumb.css("cursor", "pointer");
                    thumb.css("display", "inline");
                    thumb.click(spvOnClick);
                    imgCount++;
                }

            }
        }

    }

}

function spvOnClick() {

    var myCur = $(this);

    var myRootID = "#" + myCur.attr("rootID");

    var myRoot = $(myRootID);

    var myIndex = myCur.attr("thumIndex");

    myRoot.attr("curSelected", myIndex);

    var mainImage = $("#solutionMainImage");

    var oldSrc = mainImage.attr("src");
    mainImage.attr("nextImage", myCur.attr("src").replace("_thumb.png", ".png"));
    mainImage.fadeOut("fast", spvSwapCB);
    myCur.attr("nextImage", oldSrc.replace(".png", "_thumb.png"));
    myCur.fadeOut("fast", spvSwapCB);
    

    //spvDraw(myRoot);

}

function spvSwapCB() {
    var img = $(this)
    img.attr("src", img.attr("nextImage"));
    $(this).fadeIn("fast");

}



