// 放大效果操作对象全局变量
var _3dBigOperator = null;

function OneProductLoader() {

    // flash路径,可动态改变
    this.flashUrl = "http://ts.3d2.com.cn/";

    // flash路径参数规则
    this.flashUrlRole = "?id={#pid}&uid={#uid}&is={#isWaterMark}&sp={#speed}";

    // 替换flash路径规则并返回替换结果
    this.replaceRole = function(productId, guestId, isWaterMark, speed) {
        var result = this.flashUrlRole;
        result = result.replace("{#pid}", productId.toString()).replace(
				"{#uid}", guestId.toString()).replace("{#isWaterMark}",
				isWaterMark.toString()).replace("{#speed}", speed.toString());
        return result;
    }

    /**
    * 动态加载一个js文件的方法 param { string } jsFilePath : js文件路径
    */
    function loadJs(jsFilePath) {

        var head = document.getElementsByTagName("head").item(0);
        var style = document.createElement("script");
        style.setAttribute("language", "javascript");
        style.setAttribute("type", "text/javascript");
        style.setAttribute("src", jsFilePath);
        head.appendChild(style);
    }

    /**
    * 创建一个flash对象字符串 创建的flash的ID 创建的flash的播放路径 flash的宽度 flash的高度
    */
    function createFlashString(flashId, flashUrl, width, height) {
        var str = "<object  classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ";
        str += "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='"
				+ width.toString() + "px'";
        str += " height='" + height.toString() + "px' id='"
				+ flashId.toString() + "' align='middle'>";
        str += "<param name='allowScriptAccess' value='always' />";
        str += "<param name='allowFullScreen' value='false' />";
        str += "<param name='movie' value='" + flashUrl + "' />";
        str += "<param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /><param name='wmode' value='transparent' />";
        str += "<embed width='" + width.toString() + "px' height='"
				+ height.toString() + "px' src='" + flashUrl;
        str += "' wmode='opaque' quality='high' bgcolor='#ffffff' name='"
				+ flashId.toString()
				+ "' id='"
				+ flashId.toString()
				+ "' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";

        return str;
    }

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~比例为480*400的flash方法定义~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /**
    * 创建一个普通效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateNormalFlash = function(flashId, normalFlashTemplateName,
			productId, guestId, isWaterMark, speed, flashWidth, flashHeight,
			containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashNormal/"
				+ normalFlashTemplateName + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }

    /**
    * 创建一个放大效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateEnlargeFlash = function(flashId, enlargeFlashTemplateName,
			productId, guestId, isWaterMark, speed, flashWidth, flashHeight,
			containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashAEnlarge/"
				+ enlargeFlashTemplateName + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }

    /**
    * 创建一个局部放大效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreatePartEnlargeFlash = function(flashId,
			partEnlargeFlashTemplateName, productId, guestId, isWaterMark,
			speed, flashWidth, flashHeight, containerId) {

        // 加载jquery
        loadJs(this.flashUrl + "Jsco/JQuery/JQuery.js");

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashPEnlarge/"
				+ partEnlargeFlashTemplateName + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
        // 创建放大效果对象
        _3dBigOperator = new BigOperator(containerId, "", "", "Loading...", 10,
				guestId, productId);

        _3dBigOperator.imgUrl = this.flashUrl;

    }

    /**
    * 创建一个局部放大效果FLASH(整个为flash)
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreatePartEnlargeFlashSwf = function(flashId,
			partEnlargeFlashTemplateName, productId, guestId, isWaterMark,
			speed, flashWidth, flashHeight, containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashPEnlargeSwf/"
				+ partEnlargeFlashTemplateName + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }




    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~比例为365*513的flash方法定义~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /**
    * 创建一个竖的普通效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateVtlNormalFlash = function(flashId, normalFlashTemplateName,
			productId, guestId, isWaterMark, speed, flashWidth, flashHeight,
			containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashNormal/"
				+ normalFlashTemplateName + "_365x513" + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }

    /**
    * 创建一个竖的放大效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateVtlEnlargeFlash = function(flashId, enlargeFlashTemplateName,
			productId, guestId, isWaterMark, speed, flashWidth, flashHeight,
			containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashAEnlarge/"
				+ enlargeFlashTemplateName + "_365x513" + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }

    /**
    * 创建一个竖的局部放大效果FLASH
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateVtlPartEnlargeFlash = function(flashId,
			partEnlargeFlashTemplateName, productId, guestId, isWaterMark,
			speed, flashWidth, flashHeight, containerId) {

        // 加载jquery
        loadJs(this.flashUrl + "Jsco/JQuery/JQuery.js");

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashPEnlarge/"
				+ partEnlargeFlashTemplateName + "_365x513" + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
        // 创建放大效果对象
        _3dBigOperator = new BigOperator(containerId, "", "", "Loading...", 10,
				guestId, productId);

        _3dBigOperator.imgUrl = this.flashUrl;
    }

    /**
    * 创建一个竖的局部放大效果FLASH(整个为flash)
    * 要创建的FLASH的ID  flashId { string }  
    * 模板枚举 normalFlashTemplateName { string } 
    * 产品ID productId { int } 
    * 客户ID guestId { int }
    * 是否水印 isWaterMark { bool }
    * 速度 speed { int }
    * FLASH宽度 flashWidth { int }
    * FLASH高度 flashHeight { int }
    * 放置FLASH的容器ID containerId { string }
    */
    this.CreateVtlPartEnlargeFlashSwf = function(flashId,
			partEnlargeFlashTemplateName, productId, guestId, isWaterMark,
			speed, flashWidth, flashHeight, containerId) {

        // 获取flash完整路径
        var fullFlashUrl = this.flashUrl + "FlashPEnlargeSwf/"
				+ partEnlargeFlashTemplateName + "_650x514" + ".swf"
				+ this.replaceRole(productId, guestId, isWaterMark, speed);
        // 创建FLASH并放置于容器中
        document.getElementById(containerId).innerHTML = createFlashString(
				flashId, fullFlashUrl, flashWidth, flashHeight);
    }
}



/**
* 放大功能操作对象 flashPanelId { string } : flash播放器Id zoomCss { string } : 放大区域的样式名
* zoomLoadingCss { string } : Loading区域的样式 zoomLoadingHtml { string }:
* Loading区域内的html代码 distance { int } :放大块与flash播放器的间距 guestId { int } : 当前客户Id
* productId { int } : 当前产品Id
*/
function BigOperator(flashPanelId, zoomCss, zoomLoadingCss, zoomLoadingHtml,
		distance, guestId, productId) {

    // 当前小图片路径
    var curSmallImgPath = null;
    // 当前大图片路径
    var curBigImagePath = null;

    this.imgUrl = "http://new3d1.lenbol.com/";

    // 当前显示放大小区域的宽
    this.zoomWidth = 50;
    // 当前显示放大小区域的高
    this.zoomHeight = 50;
    // 放大块的DIV的ID
    var currentZoomId = "xk_ZoomId";
    var currentZoomLoadingId = "xk_ZoomLoadingId";
    var zoomCss = zoomCss;
    // 大图与小图的比例
    var scaleX = 0, scaleY = 0;
    // 当前客户ID
    var currentGuestId = guestId;
    // 当前产品ID
    var currentProductId = productId;

    // 大图路径规则
    this.bigImgUrlRule = "users/{guestId}/Animation/{productId}/Big/{imgNum}.jpg";
    // 小图路径规则
    this.smallImgUrlRule = "users/{guestId}/Animation/{productId}/Small/{imgNum}.jpg";

    // 是否完成一次新的初试化
    var isInited = false;

    function Boom(_left, _top, _width, _height) {
        this.left = _left;
        this.top = _top;
        this.width = _width;
        this.height = _height;
    }

    // curSmallImgPath属性器
    this.setCurSmallImgPath = function(value) {
        curSmallImgPath = value;
    }
    this.getCurSmallImgPath = function() {
        return curSmallImgPath;
    }

    // curBigImagePath属性器
    this.setCurBigImagePath = function(value) {
        curBigImagePath = value;
    }
    this.getCurBigImagePath = function() {
        return curBigImagePath;
    }

    /**
    * 获取元素boom,返回Boom对象
    * 
    * @param {Object||string}
    *            对象ID或者对象引用
    */
    function getElementBoom(element) {

        if (typeof element == "string") {
            element = document.getElementById(element);
        }

        var _left = 0, _top = 0, _width, _height;
        _width = element.offsetWidth;
        _height = element.offsetHeight;

        do {
            _left += element.offsetLeft;
            _top += element.offsetTop;
            element = element.offsetParent;
        } while (element != null)

        return new Boom(_left, _top, _width, _height);
    }

    // 将一个数值保留二位小数并返回
    function roundResult(result) {
        return (Math.round(x * 100) / 100);
    }

    // 生成大图路径的方法
    this.generateBigImagePath = function(imgNum) {
        var result = "";
        result = (this.imgUrl + this.bigImgUrlRule).replace("{guestId}",
				currentGuestId);
        result = result.replace("{productId}", currentProductId);
        result = result.replace("{imgNum}", imgNum);
        return result;
    }

    // 生成小图路径的方法
    this.generateSmallImagePath = function(imgNum) {
        var result = "";
        result = (this.imgUrl + this.smallImgUrlRule).replace("{guestId}",
				currentGuestId);

        result = result.replace("{productId}", currentProductId);
        result = result.replace("{imgNum}", imgNum);
        return result;
    }

    this.initBigImageAndShow = function(imgNum) {

        isInited = false;

        curSmallImgPath = this.generateSmallImagePath(imgNum);
        curBigImagePath = this.generateBigImagePath(imgNum);

        // 先判断页面中是否有放大块和Loading块
        if ($("#" + currentZoomId).size() == 0) {

            var div = document.createElement("div");
            div.id = currentZoomId;
            div.style.position = "absolute";
            div.style.overflow = "hidden";

            if (zoomCss != "")
                $(div).addClass(zoomCss);
            else
                div.style.border = "1px solid #cccccc";

            var img = document.createElement("img");
            $(div).append(img);
            // 确定方位
            var flashBoom = getElementBoom(flashPanelId);
            div.style.left = flashBoom.left + flashBoom.width + distance + "px";
            div.style.top = flashBoom.top + "px";

            $(document.body).append(div);

        }
        if ($("#" + currentZoomLoadingId).size() == 0) {
            var div = document.createElement("div");
            div.id = currentZoomLoadingId;
            $(div).addClass(zoomLoadingCss);
            div.style.position = "absolute";
            div.style.width = "230px";
            div.style.height = "230px";
            div.style.lineHeight = "230px";
            div.style.textAlign = "center";
            div.style.fontWeight = "bold";

            $(div).html(zoomLoadingHtml);
            // 确定方位

            var flashBoom = getElementBoom(flashPanelId);
            div.style.left = flashBoom.left + flashBoom.width + distance + "px";
            div.style.top = flashBoom.top + "px";

            $(document.body).append(div);
        }

        var smallImgLoader = new Image(); // 小图加载器
        var bigImgLoader = new Image(); // 大图加载器
        var isSmallImgLoaded = false;
        var isBigImgLoaded = false;

        // 如果比例为0则先要计算出比例
        if (scaleX == 0 && scaleY == 0) {

            smallImgLoader.onload = function() {

                isSmallImgLoaded = true;
                if (isBigImgLoaded) {
                    scaleX = bigImgLoader.width / smallImgLoader.width;
                    scaleY = bigImgLoader.height / smallImgLoader.height;
                    // document.getElementById(currentZoomId).style.width =
                    // parseInt(56 * scaleX)+ "px";
                    // document.getElementById(currentZoomId).style.height =
                    // parseInt(56* scaleY) + "px";
                    document.getElementById(currentZoomId).style.width = "230px";
                    document.getElementById(currentZoomId).style.height = "230px";
                    // 显示放大块
                    document.getElementById(currentZoomId).style.display = "block";
                    // 隐藏loading块
                    document.getElementById(currentZoomLoadingId).style.display = "none";

                    // 加载完成
                    isInited = true;
                }
            }

            bigImgLoader.onload = function() {
                isBigImgLoaded = true;
                if (isSmallImgLoaded) {
                    scaleX = bigImgLoader.width / smallImgLoader.width;
                    scaleY = bigImgLoader.height / smallImgLoader.height;
                    // document.getElementById(currentZoomId).style.width =
                    // parseInt(55* scaleX)+ "px";
                    // document.getElementById(currentZoomId).style.height =
                    // parseInt(55* scaleY)+ "px";
                    document.getElementById(currentZoomId).style.width = "230px";
                    document.getElementById(currentZoomId).style.height = "230px";
                    // 显示放大块
                    document.getElementById(currentZoomId).style.display = "block";
                    // 隐藏loading块
                    document.getElementById(currentZoomLoadingId).style.display = "none";

                    // 加载完成
                    isInited = true;
                }
            }
        } else {

            smallImgLoader.onload = function() {
                isSmallImgLoaded = true;
                if (isBigImgLoaded) {
                    // 显示放大块
                    document.getElementById(currentZoomId).style.display = "block";
                    // 隐藏loading块
                    document.getElementById(currentZoomLoadingId).style.display = "none";

                    // 加载完成
                    isInited = true;
                }
            }

            bigImgLoader.onload = function() {
                isBigImgLoaded = true;
                if (isSmallImgLoaded) {
                    // 显示放大块
                    document.getElementById(currentZoomId).style.display = "block";
                    // 隐藏loading块
                    document.getElementById(currentZoomLoadingId).style.display = "none";

                    // 加载完成
                    isInited = true;
                }

            }
        }
        document.getElementById(currentZoomId).style.display = "none";
        document.getElementById(currentZoomLoadingId).style.display = "block";

        smallImgLoader.src = curSmallImgPath;
        bigImgLoader.src = curBigImagePath;

        // 加载大图和小图以便进行比例显示
        $("#" + currentZoomId).find("img").eq(0).attr("src", bigImgLoader.src);

    }

    this.closeZoom = function() {
        if ($("#" + currentZoomId).size() != 0) {
            document.getElementById(currentZoomId).style.display = "none";
        }
    }

    this.move = function(small_x, small_y) {
        // 根据比例获取大图的x和y坐标
        if (scaleX > 0 && scaleY > 0) {

            var curX = (small_x > 0) ? small_x * scaleX : 0;
            var curY = (small_y > 0) ? small_y * scaleY : 0;

            $("#" + currentZoomId).get(0).scrollLeft = curX;
            $("#" + currentZoomId).get(0).scrollTop = curY;
        }
    }
}

/*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 页面需要的其他方法
* 
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
// flash方法
function showBig(imgNum, smallImgWidth, smallImgHeight) {

    imgNum--;

    // set right num
    if (_3dBigOperator != null) {

        _3dBigOperator.initBigImageAndShow(imgNum);
    }
}

// flasho方法
function hideBig() {
    // 强制所有关闭
    _3dBigOperator.closeZoom();
}

// flasho方法
function showPosition(x, y) {
    _3dBigOperator.move(x, y);
}

document.oncontextmenu = new Function("return false;");