2222

function DominoDotBack(strName)
{
    function $(id)
    {
        return document.getElementById(id);
    }

    //全局變量
    var dragapproved = false;      
    var z,x,y;
    var imgMove;
    var imgMove_left, imgMove_top;
    var img;
    var img_left, img_top;
    var imageCount;
    var w,h,w1,h1;

    //初始化
    DominoDotBack.prototype.Init = function ()
    {
        imageCount = parseInt($("hidd_imageCount").value);
        if($("hidd_chooseImages").value == "")
            //獲取隨機圖片
            getRandomImages();
        else
            //獲取已經選擇好的圖片
            getChooseImages();
           
//      var oPixelInfo = eval($("hidd_pixel_info").value);
//     w = parseInt(oPixelInfo[0].BrowseWidth);
//     h = parseInt(oPixelInfo[0].BrowseHeight) * 2;
//    
//     w1 = w / 4;
//     h1 = h / 4;

       // w = 100;
       // h = 200;
       // w1 = 50;
       // h1 = 100;
        w = 120;
        h = 227;
        w1 = 50;
        h1 = 95;
       
        //下面四張預覽圖片
        changePreviewImages();
           
       
    }

    //獲取隨機圖片
    function getRandomImages()
    {
        var imgs =  $("hidd_randomImgs").value.split("|");
        var img;
        for(var i = 0; i < imgs.length; i++)
        {
            img = $(imgs[i]);
            $("Img" + (i+1)).src = img.src;
            $("Img" + (i+1)).name = img.id;
            img.removeAttribute("src");
        }
        //隨機抽中的類別也要展開
        $("ul_" + $("hidd_randomCategory").value).style.display = "block";
    }

    //獲取已經選擇好的圖片
    function getChooseImages()
    {
        var ids =  $("hidd_chooseImageIds").value.split("|");
        var img;
       
        for(var i = 0; i < imageCount; i++)
        {
            img = $(ids[i]);
            $("Img" + (i+1)).src = img.src;
            $("Img" + (i+1)).name = ids[i];
            img.removeAttribute("src");
        }
    }

    //右邊菜單擊事件
    DominoDotBack.prototype.display = function (menu)
    {
        //加載頁面的時候已經把圖片類別存在hidd，分隔符為“|”
        var categories = $("hidd_categories").value;
        var categoryArray = new Array();  
        categoryArray = categories.split("|");
        for(var i = 0; i < categoryArray.length; i++)
        {
            //如果不是當前類別，就隱藏
            if(menu != categoryArray[i])
                $("ul_" + categoryArray[i]).style.display = "none";
        }
       
        //當前類別如果當前狀態是顯示，則隱藏，反之亦然
        var obj = $("ul_" + menu);
        var displayValue = "block";
        if(obj.style.display == "block")
        {
            displayValue = "none";
        }
       
        obj.style.display = displayValue;
        $("hidd_currentCategory").value = menu;
    }

    /*================================================================*/

    //獲取控件的 Left
    function getLeft(id)
    {
        var left = 0;
        while(id != null)
        {
            left += id.offsetLeft;
            id = id.offsetParent;
        }
        return left;
    }

    //獲取控件的 Top
    function getTop(id)
    {
        var top = 0;
        while(id != null)
        {
            top += id.offsetTop;
            id = id.offsetParent;
        }
        return top;
    }

    //重新準備
    function reset()
    {
        imgMove = $("imgMove");
        imgMove.style.display = "none";
        imgMove.removeAttribute("src");
        dragapproved = false;
    }

    //移動放開鼠標
    function document_OnMouseUp()
    {
        //取消移動事件
        dragapproved = false;
       
        //移動層屬性
        imgMove = $("imgMove");
        if(imgMove.src == "")
            return;
        imgMove_left = getLeft(imgMove);
        imgMove_top = getTop(imgMove);
       
        //type為1說明當前圖片是在左邊拖過來的，2說明圖片是在右邊拖動的
        var type = $("hidd_type").value;
        //記錄有沒有移動圖片
        var count = 0;
       
        //循環判斷移動層是否在某個圖片層上
        for ( var i = 1; i <= imageCount; i++ )
        {
            img = $("Img" + i);
           
            img_left = getLeft(img);
            img_top = getTop(img);

            //判斷移動層是否在某個圖片層上
            if(img_left < imgMove_left && img_left + w > imgMove_left &&
                img_top < imgMove_top && img_top + h > imgMove_top)
            {
                count++;
               
                //如果是從右邊拖動的
                if(type == "1")
                {
                    if(img.src != "")
                        $(img.name).src = img.src;
                       
                    $(imgMove.name).removeAttribute("src");
                    $(imgMove.name).parentElement.style.background = "#ffffff";
                    $(imgMove.name).parentElement.style.border = "1px solid #a4d742";
                    img.src = imgMove.src;
                    img.name = imgMove.name;
                    img.parentElement.style.background = "#ffffff";
                }
                //從左邊拖動
                else
                {
                    if(img.id == imgMove.title)
                    {
                        reset();
                        return;
                    }
                    if(img.src != "")
                    {
                        $(imgMove.title).src = img.src;
                        $(imgMove.title).name = img.name;
                    }
                    else
                    {
                        $(imgMove.title).removeAttribute("src");
                    }
                   
                    img.src = imgMove.src;
                    img.name = imgMove.name;
                    img.parentElement.style.background = "#ffffff";
                }
               
                break;
            }
        }
       
        //下面四張預覽圖片
        changePreviewImages();
       
        //如果沒有移動粘貼到圖片
        if(count == 0)
        {
            if(type == "1")
            {
                $(imgMove.name).src = imgMove.src;
            }
            else
            {
                if(imgMove_left > 622 || imgMove_left < -52 || imgMove_top < 32 || imgMove_top > 1545)
                {
                    $(imgMove.name).src = imgMove.src;
                    $(imgMove.title).removeAttribute("src");
                }
                else
                {
                    $(imgMove.title).src = imgMove.src;
                    $(imgMove.title).name = imgMove.name;
                }
            }
               
        }
       
        if(!event.ctrlKey && !event.shiftKey)
            reset();
    }

    //層在移動
    function move()
    {
        if (event.button == 1 && dragapproved)
        {
            z.style.pixelLeft = temp1 + event.clientX - x;
            z.style.pixelTop = temp2 + event.clientY - y;
           
            imgMove = $("imgMove");
           
            imgMove_left = getLeft(imgMove);
            imgMove_top = getTop(imgMove);
           
            //循環判斷移動層在哪個圖片上，顯亮它
           
            for ( var i = 1; i <= imageCount; i++ )
            {
                img = $("Img" + i);
               
                img_left = getLeft(img);
                img_top = getTop(img);

                if(img_left < imgMove_left && img_left + w > imgMove_left &&
                    img_top < imgMove_top && img_top + h > imgMove_top)
                {
                    img.parentElement.style.background = "#99cc33";
                    img.parentElement.style.border = "1px solid #85b829";
                }
                else
                {
                    img.parentElement.style.background = "#ffffff";
                    img.parentElement.style.border = "1px solid #a4d742";
                }
            }
           
            return false;
        }
        if(event.button == 2)
        {
            return false;
        }
    }

    //左邊大圖鼠標按下事件
    DominoDotBack.prototype.bigImg_OnMouseDown = function ()
    {
        //找到鼠標下的控件
        var img_id = event.srcElement.id;
        if(img_id != "ImgBg1")
            return;
        img_id = img_id.replace("Bg","");
        var img = $(img_id);
        if(img.tagName == "IMG" && img.src != "")
        {
            if($("hidd_type").value == "1" &&  $("hidd_selectImgs").value != "")
                clearSelected();
            $("hidd_type").value = "2";
           
            if(!event.ctrlKey && !event.shiftKey)
            {
                //鼠標移動到圖片上生成一個可移動的層
                imgMove = $("imgMove");
                imgMove.style.width = w;
                imgMove.style.height = h;
                imgMove.name = img.name;
                imgMove.src = img.src;
                imgMove.title = img.id;
                imgMove.style.left = getLeft(img) + 3;
                imgMove.style.top = getTop(img) + 3;
                imgMove.style.display = "block";
       
           
                //准备移动工作
                dragapproved = true;
                z = $("imgMove");
                temp1 = z.style.pixelLeft;      
                temp2 = z.style.pixelTop;
                x = event.clientX;
                y = event.clientY;
                document.onmousemove = move;
               
                document.onmouseup = document_OnMouseUp;
            }
           
            //設置shift鍵的開始和結尾
            if(!event.shiftKey && $("hidd_img2").value == "")
            {
                $("hidd_img2").value = img.id;
            }
            else if(!event.shiftKey && $("hidd_img2").value != "")
            {
                $("hidd_img2").value = img.id;
            }
            else if (event.shiftKey && $("hidd_img2").value == "")
            {
                $("hidd_img2").value = img.id;
            }
           
           
            //如果不按ctrl和shift只选中一张图
            if(!event.ctrlKey && !event.shiftKey)
            {
                //如果有其他选中的图片则取消
                if($("hidd_selectImgs").value != "")
                    clearSelected();
                select(img);
            }
            //如果按下ctrl鍵
            else if(event.ctrlKey)
            {
                if(!isSelect(img))
                    select(img);
                else
                    clearSelect(img);
            }
            //如果按下shift鍵
            else if(event.shiftKey)
            {
                if($("hidd_selectImgs").value != "")
                {
                    clearSelected();
                }
                //记录最一次选中的图片
                var a = parseInt($("hidd_img2").value.replace("Img", ""));
                //记录当前按着Shift选中的图片
                var b = parseInt(img.id.replace("Img", ""));
                var imgTemp;
                if(a == b)
                {
                    select(img);
                    return;
                }
                //按Shift键多選
                if(b > a)
                {
                    for(var i = a; i <= b; i++)
                    {
                        imgTemp = $("Img" + i);
                        if(imgTemp.src != "")
                            select(imgTemp);
                    }
                }
                else if(a > b)
                {
                    for(var i = b; i <= a; i++)
                    {
                        imgTemp = $("Img" + i);
                        if(imgTemp.src != "")
                            select(imgTemp);
                    }
                }
            }
        }
    }

    //右邊小圖按下鼠標事件
    DominoDotBack.prototype.smallImg_OnMouseDown = function ()
    {
        //找到鼠標下的控件
        var img = event.srcElement;
        if(img.tagName == "IMG" && img.src != "")
        {
            if($("hidd_type").value == "2" &&  $("hidd_selectImgs").value != "")
                clearSelected();
            $("hidd_type").value = "1";
           
            if(!event.ctrlKey && !event.shiftKey)
            {
                //鼠標移動到圖片上生成一個可移動的層
                imgMove = $("imgMove");
                imgMove.style.width = w1;
                imgMove.style.height = h1;
                imgMove.name = img.id;
                imgMove.src = img.src;
                imgMove.style.left = getLeft(img) + 2;
                imgMove.style.top = getTop(img) - $("U_" + $("hidd_currentCategory").value).scrollTop+2;
                imgMove.style.display = "block";
       
           
                //准备移动工作
                dragapproved = true;
                z = $("imgMove");
                temp1 = z.style.pixelLeft;      
                temp2 = z.style.pixelTop;
                x = event.clientX;
                y = event.clientY;
                document.onmousemove = move;
               
                document.onmouseup = document_OnMouseUp;
            }
           
            //設置shift鍵的開始和結尾
            if(!event.shiftKey && $("hidd_img2").value == "")
            {
                $("hidd_img2").value = img.id;
            }
            else if(!event.shiftKey && $("hidd_img2").value != "")
            {
                $("hidd_img2").value = img.id;
            }
            else if (event.shiftKey && $("hidd_img2").value == "")
            {
                $("hidd_img2").value = img.id;
            }
           
           
            //如果不按ctrl和shift只选中一张图
            if(!event.ctrlKey && !event.shiftKey)
            {
                //如果有其他选中的图片则取消
                if($("hidd_selectImgs").value != "")
                    clearSelected();
                select(img);
            }
            //如果按下ctrl
            else if(event.ctrlKey)
            {
                if(!isSelect(img))
                    select(img);
                else
                    clearSelect(img);
            }
            //如果按下shift
            else if(event.shiftKey)
            {
                if($("hidd_selectImgs").value != "")
                {
                    clearSelected();
                }
                //记录最一次选中的图片
                var a = parseInt($("hidd_img2").value.replace($("hidd_currentCategory").value + "_", ""));
                //记录当前按着Shift选中的图片
                var b = parseInt(img.id.replace($("hidd_currentCategory").value + "_", ""));
                var imgTemp;
                if(a == b)
                {
                    select(img);
                    return;
                }
                //按Shift键多選
                if(b > a)
                {
                    for(var i = a; i <= b; i++)
                    {
                        imgTemp = $($("hidd_currentCategory").value + "_" + i);
                        if(imgTemp.src != "")
                            select(imgTemp);
                    }
                }
                else if(a > b)
                {
                    for(var i = b; i <= a; i++)
                    {
                        imgTemp = $($("hidd_currentCategory").value + "_" + i);
                        if(imgTemp.src != "")
                            select(imgTemp);
                    }
                }
            }
        }
       
    }

    //判断图片是否被选中
    function isSelect(img)
    {
        if(img.parentElement.style.background == "#ffffff" || img.parentElement.style.background == "")
            return false;
        else
            return true;
    }

    //选中
    function select(img)
    {
        img.parentElement.style.background = "#99cc33";
        img.parentElement.style.border = "1px solid #85b829";
        $("hidd_img").value = img.id;
        $("hidd_selectImgs").value += img.id + "|";
    }

    //清除当前选中的
    function clearSelect(img)
    {
        img.parentElement.style.background = "#ffffff";
        img.parentElement.style.border = "1px solid #a4d742";
        $("hidd_selectImgs").value = $("hidd_selectImgs").value.replace(img.id + "|", "");
    }

    //清除已被选择的
    function clearSelected()
    {
        var imgs = $("hidd_selectImgs").value.substr(0,$("hidd_selectImgs").value.length-1).split('|');
        for(var i = 0; i < imgs.length; i++)
        {
            $(imgs[i]).parentElement.style.background = "#ffffff";
            $(imgs[i]).parentElement.style.border = "1px solid #a4d742";
        }
        $("hidd_selectImgs").value = "";
    }

    //右邊小圖雙擊事件
    DominoDotBack.prototype.smallImg_OnDbClick = function ()
    {
        if($("hidd_type").value == "1")
        {
            var img,img2;
            img2 = $($("hidd_img").value);
           
           
            var count = 0;
            for(var j = 1; j <= imageCount; j++)
            {
                img = $("Img" + j);
               
                if(img.src != "")
                {
                    $(img.name).src = img.src;
                }
               
                if(img2.src != "")
                {
                    img.src = img2.src;
                    img.name = img2.id;
                    img2.removeAttribute("src");
                    count++;
                    break;
                }
            }
            //下面四張預覽圖片
            changePreviewImages();
           
        }
    }

    //多选移动
    DominoDotBack.prototype.moveToLeft = function ()
    {
        if($("hidd_selectImgs").value == "" || $("hidd_type").value != "1")
        {
            alert("Please select picture!");
            return;
        }
        var imgs = $("hidd_selectImgs").value.substr(0,$("hidd_selectImgs").value.length-1).split('|');
       
        var count = 0;
        for(var i = 0; i < imgs.length; i++)
        {
            for(var j = 1; j <= imageCount; j++)
            {
                if($("Img" + j).src == "" && $(imgs[i]).src != "")
                {
                    $("Img" + j).src = $(imgs[i]).src;
                    $("Img" + j).name = $(imgs[i]).id;
                    $(imgs[i]).removeAttribute("src");
                    count++;
                    break;
                }
            }
        }
        if(count <= 0)
        {
           alert("Sorry, It is full!")
        }
        else
        {
            //下面四張預覽圖片
            changePreviewImages();
        }
       
        clearSelected();
        reset();
    }

    //按鍵執行事件
    DominoDotBack.prototype.body_OnKeyDown = function ()
    {
        //按刪除鍵
        if(event.keyCode == 46 && $("hidd_type").value == "2")
        {
            if($("hidd_selectImgs").value == "")
            {
                alert("Please select picture!");
                return;
            }
            if(window.confirm("Are you sure you want to delete the select?"))
            {
                var imgs = $("hidd_selectImgs").value.substr(0,$("hidd_selectImgs").value.length-1).split('|');
                var img;
                for(var i = 0; i < imgs.length; i++)
                {
                    img = $(imgs[i]);
                    if(isSelect(img))
                    {
                        $(img.name).src = img.src;
                        img.removeAttribute("src");
                    }
                }
               
               
                clearSelected();
                reset();
            }
        }
       
        //回車鍵
        if(event.keyCode == 13)
        {
            alert("hidd_type: " + $("hidd_type").value + "\n\n" +
                "imgMove: " + $("imgMove").src + "\n\n" +
                "hidd_img: " + $("hidd_img").value + "\n\n" +
                "hidd_img2: " + $("hidd_img2").value + "\n\n" +
                "hidd_selectImgs: " + $("hidd_selectImgs").value);
        }
    }

    //================================滚动条事件================================
    function scrollMove()
    {
       divRightMove();
    }
    function divRightMove()
    {
        var scrollTop = document.documentElement.scrollTop;
        var notMoreTop = getTop($("divNext"));
        if(scrollTop > notMoreTop - 618)
            return;
        var divLeftTop = getTop($("divLeft")) - 3;
        if(scrollTop > divLeftTop)
        {
            $("divRight").style.top = document.documentElement.scrollTop - divLeftTop;
        }
        else
        {
            $("divRight").style.top = 0;
        }
    }
    window.onscroll = scrollMove;
    window.onresize = scrollMove;
    window.onload = scrollMove;

    //==========NextStep===================
    DominoDotBack.prototype.setNextStep = function ()
    {
        var ready = true;
       
        for ( var i = 1; i <= imageCount; i++ )
        {
            if($("Img" + i).src == "")
            {
                ready = false;
                break;
            }
        }
       
        if(!ready)
        {
            alert("Not completed !");
            return;
        }
        var list1 = new Array();
        var list2 = new Array();
       
        for ( var i = 1; i <= imageCount; i++ )
        {
            list1.push($($("Img" + i).name).title);
            list2.push($("Img" + i).name);
        }
       
        $("hidd_chooseImages").value = list1.join(";");
        $("hidd_chooseImageIds").value = list2.join("|");
       
        __doPostBack('btn_next_step', '');
    }
    //========================================================================

    DominoDotBack.prototype.openUploadWin = function ()
    {
        var quote = "n";
        var list = new Array();
        var count = parseInt($("hidd_uploadImgCount").value);
        for(var i = 1; i <= count; i++)
        {
            if($("Upload_" + i).src == "")
            {
                quote = "y";
                list.push("Upload_" + i);
            }
        }
        $("hidd_uploadImg").value = list.join("|");
        var url = "../uploader/dyupload.aspx?product=DB027FA864618FF4579564700E55E2BB&quote=" + quote + "&layer=back";
        window.open(url);
    }

    DominoDotBack.prototype.dn_setUploadImages = function (id)
    {
        $("U_Upload").innerHTML = "";
        var imgPath = "../AttachFiles/UserPhoto/temp/thumb/";
        var html = new Array();
        var imgs =  id.split(";");
       
       
        $("hidd_uploadImgCount").value = imgs.length;
       
        for (var i = 0; i < imgs.length; i++)
        {
            html.push("<li><div><img id=\"");
            html.push("Upload_");
            html.push(i + 1);
            html.push("\" src=\"");
            html.push(imgPath);
            html.push(imgs[i]);
            html.push("_pt.jpg\" title=\"");
            html.push(imgs[i]);
            html.push("\" /></div></li>");
        }
        $("U_Upload").innerHTML = html.join("");
       
       
        if($("hidd_uploadImg").value != "")
        {
            var list = $("hidd_uploadImg").value.split("|");
            for(var i = 0; i <= list.length; i++)
            {
               
                for ( var j = 1; j <= imageCount; j++ )
                {
                    if($("Img" + j).name == list[i])
                    {
                        $("Img" + j).src = $($("Img" + j).name).src;
                        $($("Img" + j).name).removeAttribute("src");
                        break;
                    }
                }
            }
        }
    }
   
    //下面四張預預覽圖
    function changePreviewImages()
    {
        var src = $("Img1").src;
        if(src == "")
        {
            $("ImgV1").removeAttribute("src");
            $("ImgV2").removeAttribute("src");
            $("ImgV3").removeAttribute("src");
            $("ImgV4").removeAttribute("src");
        }
        else
        {
            $("ImgV1").src = src;
            $("ImgV2").src = src;
            $("ImgV3").src = src;
            $("ImgV4").src = src;
        }
    }
}