var mapView;

function showMap1(option) {
    $("#MapImg").attr("src", "../images/map.gif");
    showMap(option);
}

function showMap2(option) {
    $("#MapImg").attr("src", "../images/K3-map-02.gif");
    showMap(option);
}

function showMap3(option) {
    $("#MapImg").attr("src", "../images/map_cn.gif");
    showMap(option);
}

function showMap4(option) {
    $("#MapImg").attr("src", "../images/K3-map-02.gif");
    showMap(option);
}

function showMap(option) {
    var args = {
        x:0,
        y:0,
        r:1
    }
    $.extend(args,option)
    var mapCom = $("#MapView");
    mapCom.show();
    reLocMap();
    $(window).bind("resize",reLocMap);
    $(window).bind("scroll",reLocMap);
    $(".cs", mapCom).click(hideMap);
    if (!mapView) {
        mapView = new MapView(document.getElementById("MapImg")); 
    }
    $(".zo", mapCom).mousedown(mapView.zoomOut);
    $(".zi", mapCom).mousedown(mapView.zoomIn);
    //$(".pr", mapCom).mousedown(printMap);
    mapView.zoomTo(args.r).locTo(args.x, args.y);

}
function reLocMap() {
    var mapCom = $("#MapView");

    var bodyHeight = document.body.offsetHeight - document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;
    //设置Mask高度
    if (bodyHeight > clientHeight)
        clientHeight = bodyHeight;
    else
        bodyHeight = clientHeight;

    $(".msk", mapCom).height(bodyHeight + "px");
    var mpfrm = $(".mpfrm", mapCom)
    mpfrm.css({
    "top": 118,
    "left": Math.max(0, ($(window).width() - mpfrm[0].offsetWidth) / 2) + document.documentElement.scrollLeft
    });
}
function hideMap() {
    $("#MapView").hide();
    $(window).unbind("resize", reLocMap);
    $(window).unbind("scroll", reLocMap);
}
function MapView(map) {
    var _this = this;
    this.Map = map;
    $("#frame").width(660 + ($(_this.Map).width() - 660) * 2).height(420 + ($(_this.Map).height() - 420) * 2).css({ "margin-left": -($(_this.Map).width() - 660), "margin-top": -($(_this.Map).height() - 420) });

    $(map).draggable({ containment: '#frame' })
    this.MapWidth = map.width;
    this.MapHeight = map.height;
    this.ZoomScales = [0.537, 0.6, 0.7, 0.8, 0.9, 1];
    this.CurZoom = 6;
    this.zoomIn = function() {
        _this.zoomTo(_this.CurZoom-1);
        return _this;
    }
    this.zoomOut = function() {
        _this.zoomTo(_this.CurZoom+1);
        return _this;
    }
    this.zoomTo = function(r) {
        if (_this.CurZoom != r) {
            r = r < 1 ? 1 : r;
            r = r > _this.ZoomScales.length ? _this.ZoomScales.length : r;
            _this.Map.height = _this.MapHeight * _this.ZoomScales[r - 1];
            _this.Map.width = _this.MapWidth * _this.ZoomScales[r - 1];
            var x = _this.CurZoom * (parseInt(_this.Map.style.left == "" ? 0 : _this.Map.style.left) + 330) / r - 330;
            var y = _this.CurZoom * (parseInt(_this.Map.style.top == "" ? 0 : _this.Map.style.top) + 330) / r - 330;
            _this.locTo(Math.abs(x), Math.abs(y));
            $("#frame").width(660 + ($(_this.Map).width() - 660) * 2).height(420 + ($(_this.Map).height() - 420) * 2).css({ "margin-left": -($(_this.Map).width() - 660), "margin-top": -($(_this.Map).height() - 420) });

            _this.CurZoom = r;
        }
        return _this;
    }
   this.locTo = function(x, y) {
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        var maxLeft = _this.Map.width - 660;
        var maxTop = _this.Map.height - 420;
        x = x > maxLeft ? maxLeft : x;
        y = y > maxTop ? maxTop : y;
        _this.Map.style.left = -x + "px";
        _this.Map.style.top = -y + "px";
        return _this;
    }
}

function printMap() {
    window.open("printMap.htm");
}