var mainImageWidth = 290
var zoomwidth = 260;
var zoomheight = 400;
var zoomleft = 300;
var zoomQuality = 80;


function productMovieInt_DoFSCommand(command, args) {

    if (command == "movEvent") {
        if (args == "Complete") {
            $(".thumb").eq(1).trigger('click');
        }
    }
}

$(document).ready(function () {
    $(".thumb").not(".moviethumb").not(".animationthumb").click(function () {
        var id = $(this).attr("href").substring(1);
        var src = ImageServer + id + "/" + mainImageWidth + "/-1/85.jpg";
        $(".mainimage").attr("src", src);
        $("#productMovie").hide();
        $("#productAnimation").hide();
        $(".mainimage").show();
    });
    $(".animationthumb").click(function () {
        var id = $(this).attr("href").substring(1);
        var src = ImageServer + id + "/" + mainImageWidth + "/-1/85.jpg";
        $("#productAnimation").show();
        $("#productMovie").hide();
        $(".mainimage").hide();
        $("#productAnimation").mouseout();
    });
    $(".moviethumb").click(function () {
        $("#productAnimation").hide();
        $("#productMovie").show();
        $(".mainimage").hide();
    });
    var zoomOpen = false;
    var zoomW = 0;
    var zoomH = 0;
    function mainimagemm(e) {
        var offset = $(this).offset()
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        var w = $(".mainimage").outerWidth();
        var h = $(".mainimage").outerHeight();
        if (zoomOpen) {
            if (x > w)
                x = w;
            if (y > h)
                y = h;

            var xr = x / w;
            var yr = y / h;
            $("#mainimageZoom img").css({ left: (0 - ((zoomW - w) * xr)), top: (0 - ((zoomH - h) * yr)) });


            $("#output").html(
                    "mainimagemm - zoomOpen<br />" +
                    "e.pageX:" + e.pageX + "<br />" +
                    "e.pageY:" + e.pageY + "<br />" +
                    "offset.left:" + offset.left + "<br />" +
                    "offset.top:" + offset.top + "<br />" +
                    "x:" + x + "<br />" +
                    "y:" + y + "<br />" +
                    "w:" + w + "<br />" +
                    "h:" + h + "<br />" +
                    "xr:" + xr + "<br />" +
                    "yr:" + yr + "<br />" +
                    "leftMargin:" + (0 - ((zoomW - w) * xr)) + "<br />" +
                    "topMargin:" + (0 - ((zoomH - h) * yr)) + "<br />"
                    );
            return;
        }

    }

    function globalZoomClose() {
        if (zoomOpen) {
            zoomOpen = false;
            $("#mainimageZoom").remove();

            $(window).unbind("mousedown", globalZoomClose);
        }
    }
    $(".mainimage").mouseover(function () {
        $(this).addClass("over").bind("mousemove", mainimagemm);
    });
    $(".mainimage").mouseout(function () {
        if (zoomOpen)
            return;
        $(this).removeClass("over").unbind("mousemove", mainimagemm);
    });
    $(".mainimage").parent().click(function () {

        if (zoomOpen)
            return;
        zoomOpen = true;
        var imghref = $(this).attr("href");

        $(this).prepend("<div id=\"mainimageZoom\"><span>Loading...</span></div>");
        $("#mainimageZoom").css({ marginLeft: zoomleft, width: zoomwidth, height: zoomheight });
        $("#mainimageZoom").fadeIn("fast");
        $("#mainimageZoom").append("<img />");
        $("#mainimageZoom img").hide().load(function () {
            zoomW = $("#mainimageZoom img").width();
            zoomH = $("#mainimageZoom img").height();
            $("#mainimageZoom span").fadeOut("fast", function () {
                $("#mainimageZoom img").fadeIn("fast", function () {

                    $(window).bind("mousedown", globalZoomClose);
                    $(".mainimage").mousemove();
                    //moviemm();
                });
            });
        }).attr("src", imghref);
        return false;
    });
});

function makeMovie(movieLoc) {
    var vzs = { menu: "false", swliveconnect: true, allowscriptaccess: "sameDomain", name: "productMovieInt", id: "productMovieInt", wmode:"opaque" };
    swfobject.embedSWF(movieLoc + ".swf", "productMovieInt", "278", "417", "9.0.0", "", vzs, vzs, vzs);
    $("#productAnimation").hide();
    $(".mainimage").hide();
}
var swapFrameInt;
function makeAnimation(animId) {
    //Init

    clearInterval(swapFrameInt);
    var frameCount = 24;
    var movieObj = $("#productAnimation")
    $(".mainimage").hide();
  


    //var movieId = $("#ImageIdTextBox").val();
    var width = mainImageWidth;
    var initalQuality = 65;
    var autoSpinInterval = 100;
    var autoAnimate = true;
    var useFade = false;
    movieObj.empty();
    //Seqential load.
    var frameI = 0;
    var frameDelta = 1;
    var swapFrameSpeed = autoSpinInterval;
    var zoomW;
    var zoomH;
    var loading = true;
    var loopCount = 0;
    function moviemm(e) {
        if (loading)
            return
        var offset = $(this).offset()
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        var w = $("#productAnimation img").outerWidth();
        var h = $("#productAnimation img").outerHeight();
        if (zoomOpen) {
            if (x > w)
                x = w;
            if (y > h)
                y = h;

            var xr = x / w;
            var yr = y / h;
            $("#productAnimationZoom img").css({ left: (0 - ((zoomW - w) * xr)), top: (0 - ((zoomH - h) * yr)) });


            $("#output").html(
                    "moviemm - zoomOpen<br />" +
                    "e.pageX:" + e.pageX + "<br />" +
                    "e.pageY:" + e.pageY + "<br />" +
                    "offset.left:" + offset.left + "<br />" +
                    "offset.top:" + offset.top + "<br />" +
                    "x:" + x + "<br />" +
                    "y:" + y + "<br />" +
                    "w:" + w + "<br />" +
                    "h:" + h + "<br />" +
                    "xr:" + xr + "<br />" +
                    "yr:" + yr + "<br />" +
                    "leftMargin:" + (0 - ((zoomW - w) * xr)) + "<br />" +
                    "topMargin:" + (0 - ((zoomH - h) * yr)) + "<br />"
                    );
            return;
        }

        var newswapFrameSpeed = 0
        if (x < w / 3) {
            frameDelta = 1;
            newswapFrameSpeed = autoSpinInterval
        }
        if (x < w / 5) {
            frameDelta = 1;
            newswapFrameSpeed = autoSpinInterval / 2
        }
        if (x > w - (w / 3)) {
            frameDelta = -1;
            newswapFrameSpeed = autoSpinInterval
        }
        if (x > w - (w / 5)) {
            frameDelta = -1;
            newswapFrameSpeed = autoSpinInterval / 2
        }
        if (swapFrameSpeed != newswapFrameSpeed) {
            swapFrameSpeed = newswapFrameSpeed;
            clearInterval(swapFrameInt);
            if (useFade) {
                if (swapFrameSpeed > 0)
                    swapFrameInt = setInterval(swapFrameFade, newswapFrameSpeed);
            } else {
                if (swapFrameSpeed > 0)

                    swapFrameInt = setInterval(swapFrame, newswapFrameSpeed);
            }
        }
    }
    var zoomOpen = false;
    $("#productAnimation").mouseover(function () {
        if (loading)
            return
        $("#productAnimation").addClass("over");
        $("#productAnimation").bind("mousemove", moviemm);
        frameDelta = 0;
    });
    $("#productAnimation").mouseout(function () {
        if (loading)
            return
        if (zoomOpen)
            return;
        $("#productAnimation").removeClass("over");
        $("#productAnimation").unbind("mousemove", moviemm);
        startAnimation();
        loopCount = 2;
    });
    function globalZoomClose() {
        if (loading)
            return
        if (zoomOpen) {
            zoomOpen = false;
            $("#productAnimationZoom").remove();
            clearInterval(swapFrameInt);
            if (useFade) {
                swapFrameInt = setInterval(swapFrameFade, swapFrameSpeed);
            } else {
                swapFrameInt = setInterval(swapFrame, swapFrameSpeed);
            }
            $(window).unbind("mousedown", globalZoomClose);
        }
    }
    $("#productAnimation").mousedown(function () {
        if (loading)
            return
        if (zoomOpen)
            return;
        zoomOpen = true;
        clearInterval(swapFrameInt);
        $(this).append("<div id=\"productAnimationZoom\"><span>Loading...</span></div>");
        $("#productAnimationZoom").css({ marginLeft: zoomleft, width: zoomwidth, height: zoomheight });
        $("#productAnimationZoom").fadeIn("fast");
        $("#productAnimationZoom").append("<img />");
        $("#productAnimationZoom img").hide().load(function () {
            zoomW = $("#productAnimationZoom img").width();
            zoomH = $("#productAnimationZoom img").height();
            $("#productAnimationZoom span").fadeOut("fast", function () {
                $("#productAnimationZoom img").fadeIn("fast", function () {

                    $(window).bind("mousedown", globalZoomClose);
                    $("#productAnimation").mousemove();
                });
            });
        }).attr("src", ImageServer + animId + "/-1/-1/" + frameI + "/" + zoomQuality + ".jpg");

    });

    function swapFrame() {
        $("#output").html(
                    "swapFrame<br />" +
                    "frameDelta:" + frameDelta + "<br />" +
                    "frameI:" + frameI + "<br />"
                    );
        if (frameDelta < 0) {
            if (frameI == frameCount || frameI == 0) {
                $(".animFrame:last").show()
                if (frameI == 0) {
                    frameI = frameCount;
                }
                frameI += frameDelta;
                $(".animFrame").css({ zIndex: 1 }).show();

            } else {
                $("#frame" + frameI).hide()
                frameI += frameDelta;
            }
        } else {
            if (frameI == frameCount) {
                frameI = 0;
                $(".animFrame").not(":first").css({ zIndex: 1 }).hide();
                frameI += frameDelta;
                loopCount++;
                if (loopCount == 3) {
                    frameDelta = 0;
                }
            } else {
                $("#frame" + frameI).css({ zIndex: 5 }).show();
                frameI += frameDelta;
            }
        }

    }
    function swapFrameFade() {
        $("#output").html(
                    "swapFrameFade<br />" +
                    "frameDelta:" + frameDelta + "<br />" +
                    "frameI:" + frameI + "<br />"
                    );
        if (frameDelta < 0) {
            if (frameI == frameCount || frameI == 0) {
                $(".animFrame:last").fadeIn("fast", function () {
                    if (frameI == 0) {
                        frameI = frameCount;
                    }
                    frameI += frameDelta;
                    $(".animFrame").css({ zIndex: 1 }).show();
                })
            } else {
                $("#frame" + frameI).fadeOut("fast", function () {
                    frameI += frameDelta;

                })
            }
        } else {
            if (frameI == frameCount) {
                frameI = 0;
                $(".animFrame").not(":first").not(":last").css({ zIndex: 1 }).hide();
                $(".animFrame:last").fadeOut("fast", function () {
                    frameI += frameDelta;

                    loopCount++;
                    if (loopCount == 3) {
                        frameDelta = 0;
                    }
                })
            } else {
                $("#frame" + frameI).css({ zIndex: 5 }).fadeIn("fast", function () {
                    frameI += frameDelta;
                });
            }
        }

    }
    $("#AnimButton").click(function () {
        if (useFade) {
            swapFrameFade();
        } else {
            swapFrame();
        }
    });
    function startAnimation() {
        frameDelta = 1;
        swapFrameSpeed = autoSpinInterval
        clearInterval(swapFrameInt);
        if (useFade) {
            swapFrameInt = setInterval(swapFrameFade, swapFrameSpeed);
        } else {
            swapFrameInt = setInterval(swapFrame, swapFrameSpeed);
        }
    }
    function fullyLoaded() {
        if (autoAnimate) {
            startAnimation();
            loading = false;
        }

        movieObj.append("<div class=\"arrows\"></div>");
        movieObj.find(".arrows").css({ width: mainImageWidth, height: mainImageWidth });
    }
    function loadNext() {
        movieObj.append("<img id=\"frame" + frameI + "\" class=\"animFrame\" />");
        $("#frame" + frameI).load(function () {
            if (frameI == 0) {
                $(this).fadeIn("fast");
                $("#movie").width($(this).width());
                $("#movie").height($(this).height());

            }
            frameI++;
            if (frameI == frameCount)
                fullyLoaded();
            else
                loadNext();
        });
        var url = ImageServer + animId + "/" + width + "/-1/" + frameI + "/" + initalQuality + ".jpg";
        $("#frame" + frameI).attr("src", url);
    }
    loadNext()


}