$(function(){
    //IE6で疑似クラスhoverを有効にする
    if (typeof document.body.style.maxHeight == "undefined") {
        $(".sub_ph").hover(function(){
            $(this).css({
                border: "#FF0000 solid 1px"
            });
        }, function(){
            $(this).css({
                border: "#999999 solid 1px"
            });
        });
    }
    
    $(".sub_ph").hover(function(){
        shoesMotion.swap(this);
    }, function(){
    });
    
    //ズームボタン
    $(".zoom_ph").click(function(){
        shoesMotion.zoom();
    });
    
});

//シューズモーション
var shoesMotion = {

    //初期設定
    init: function(){
        this.zoomFlag = false;
        this.target = "thumbnailPath";
        this.actMode = "normal";
    },
    
    //サイズ設定
    size: function(){
        this.m = 526;
        this.m_h = 460;
        this.l = 1052;
        this.l_h = 920;
    },
    
    //ドラッグ設定
    setDrag: function(){
        var size = new shoesMotion.size();
        $("#" + this.target).draggable();
        $("#" + this.target).draggable('enable');
    },
    
    //画像切り替え
    swap: function(obj){
        if (this.actMode != "zoom") {
            this.actMode = "swap";
            var size = new shoesMotion.size();
            var shoesFile = $(obj).attr("src");
            var colorName = obj.alt;
			$(".zoom_ph1").html(colorName);
            if (this.zoomFlag) {
                this.zoomFlag = false;
                $("#" + this.target).draggable('destroy');
                $("#" + this.target).hide();
                $("#" + this.target).animate({
                    left: 0,
                    top: 0,
                    height: size.m_h,
                    width: size.m,
                    opacity: 1
                }, 0, function(){
                    shoesMotion.changeZoomBtn("画像を拡大する", "url(images/btn_zoomin.jpg) 0 0 no-repeat", "default");
                });
                $("#" + this.target).hide();
                shoesMotion.show(shoesFile);
            }
            
            else {
                $("#" + this.target).hide();
                shoesMotion.show(shoesFile);
            }
        }
    },
    
    //HTML切り替え
    changeZoomBtn: function(text, bg, pointer){
        $(".zoom_ph a").attr({
            title: text
        }).css({
            background: bg
        }).html(text);
        $(".main_ph_b").css({
            cursor: pointer
        });
    },
    
    //ズーム
    zoom: function(){
        this.actMode = "zoom";
        var size = new shoesMotion.size();
        var shoesFile = $("#" + this.target).attr("src");
        if (this.zoomFlag) {
            this.zoomFlag = false;
            $("#" + this.target).draggable('destroy');
            $("#" + this.target).animate({
                left: 0,
                top: 0,
                height: size.m_h,
                width: size.m
            }, 400, function(){
                shoesMotion.changeZoomBtn("画像を拡大する", "url(images/btn_zoomin.jpg) 0 0 no-repeat", "default");
                shoesMotion.show(shoesFile);
            });
        }
        else {
            this.zoomFlag = true;
            $("#" + this.target).animate({
                left: -size.m / 2,
                top: -size.m_h / 2,
                height: size.l,
                width: size.l
            }, 400, function(){
                shoesMotion.changeZoomBtn("元のサイズに戻す", "url(images/btn_zoomout.jpg) 0 0 no-repeat", "move");
                shoesMotion.setDrag();
                shoesMotion.show(shoesFile);
            });
        }
    },
    
    //表示
    show: function(shoesFile){
        this.actMode = "normal";
        var target = this.target;
        var img = shoesFile;
        shoesLoader = new Image();
        shoesLoader.onload = function(){
            shoesLoader.onload = null;
            $("#" + target).attr({
                src: img
            });
            $("#" + target + ":hidden").fadeIn("normal");
        }
        shoesLoader.src = img;
    }
    
}

shoesMotion.init();