// JScript 文件
$(function(){
    $(".mid_dhl").find("ul").find("li:eq(2)").addClass("ul_li_xz");
    
    //绑定图片
     BangDingTuPian();
    
    var img_Array;
    
    var city_hotelShow_Date=new Object();
    city_hotelShow_Date=Page_HotelShow.getCity().value;
    
    var hotel_hotelShow_Date = new Object();
    hotel_hotelShow_Date=Page_HotelShow.getHotelAll().value;
    
    //城市选择(下拉框)=================================================
    $("#img_city").focus(function(){
        
        $("#showCity_list_div").empty(); //删除
        //读取数据    
        if(city_hotelShow_Date != null && city_hotelShow_Date.Rows.length>0)
        {
            var _html = "<table cellpadding=\"2\" cellspacing=\"2\" width=\"100%\">";
            _html += "<tr><td style=\"cursor:pointer;\"><span>全部</span><input type=\"hidden\" value=\"0\" /></td></tr>";
            for(var i=0; i<city_hotelShow_Date.Rows.length; i++)
            {
                _html += "<tr><td style=\"cursor:pointer;\"><span>" 
                       + city_hotelShow_Date.Rows[i].cCityName 
                       + " " 
                       + city_hotelShow_Date.Rows[i].cCityEnglish 
                       + "</span><input type=\"hidden\" value=\""+ city_hotelShow_Date.Rows[i].iCityId  +"\" /></td></tr>";
            }
            _html += "</table>";
            
        }
        $("#showCity_list_div").append(_html);
        $("#showCity_list_div").find("table").each(function(){
            $(this).find("tr").find("td").mousemove(function(){
                $(this).css("background","#C8E3FC");
                $("#img_city").val($(this).find("span").html());
                $("#imgShow_City_id").val($(this).find("input:hidden").val());
               
            }).mouseout(function(){
                $(this).css("background","#ffffff");
            });
            
        });
        
        var ls_offset = $("#img_city").offset();
        var ls_top = ls_offset.top+$("#img_city").height()+5;
        var ls_left = ls_offset.left;
        $("#showCity_list_div").css("top",ls_top+"px");
        $("#showCity_list_div").css("left",ls_left+"px");
        $("#showCity_list_div").show();
    });
    
    $("#img_city").blur(function(){
        $("#showCity_list_div").hide();
        $("#img_hotel").val("全部"); 
        $("#imgShow_Hotel_id").val("0");
    });
    $("#img_city").keydown(function(e){
        if(e.which==13)
        {
            return false;
        }
    });
    //城市选择(下拉框)=================================================
    
    //分店选择(下拉框)=================================================
    
    $("#img_hotel").focus(function(){
        //当城市选中之后才出现分店

        $("#showCity_list_div").empty(); //删除
        //读取数据    
        var _html = "<table cellpadding=\"2\" cellspacing=\"2\" width=\"100%\">";
        _html += "<tr><td style=\"cursor:pointer;\"><span>全部</span><input type=\"hidden\" value=\"0\" /></td></tr>";
        if(hotel_hotelShow_Date != null && hotel_hotelShow_Date.Rows.length>0)
        {
            for(var i=0; i<hotel_hotelShow_Date.Rows.length; i++)
            {
                if(hotel_hotelShow_Date.Rows[i].iCityid==$("#imgShow_City_id").val())
                {
                    _html += "<tr><td style=\"cursor:pointer;\"><span>" 
                           + hotel_hotelShow_Date.Rows[i].cHotelName
                           + "</span><input type=\"hidden\" value=\""+ hotel_hotelShow_Date.Rows[i].iId  +"\" />" 
                           + "</td></tr>";
                }
            }
            
        }
        _html += "</table>";
        $("#showCity_list_div").append(_html);
        $("#showCity_list_div").find("table").each(function(){
            $(this).find("tr").find("td").mousemove(function(){
                $(this).css("background","#C8E3FC");
                $("#img_hotel").val($(this).find("span").html());
                $("#imgShow_Hotel_id").val($(this).find("input:hidden").val());
            }).mouseout(function(){
                $(this).css("background","#ffffff");
            });
            
        });
        
        var ls_offset = $("#img_hotel").offset();
        var ls_top = ls_offset.top+$("#img_hotel").height()+5;
        var ls_left = ls_offset.left;
        $("#showCity_list_div").css("top",ls_top+"px");
        $("#showCity_list_div").css("left",ls_left+"px");
        $("#showCity_list_div").show();
        

         //弹出表格的单击事件 -----图片转换   
         $("#showCity_list_div").find("table").find("tr").each(function(){
            $(this).click(function(){
                $("#showCity_list_div").hide();
                //绑定图片
                BangDingTuPian();
                $("#img_id").hide();
                $("#img_id").fadeIn("slow");
            });
         });
    });

    $("#img_hotel").keydown(function(e){
        if(e.which==13)
        {
            return false;
        }
    });
    //分店选择(下拉框)=================================================
    
    
    if(img_List != null && img_List.Rows.length>0)
    {
        //大图=======上一张
        $("#shang").click(function(){
            if($("#imgIndex").val()==1)
            {
                alert("已是第一张");
            }
            else
            {
                $("#imgIndex").val(Number($("#imgIndex").val())-1);
                DrawImage(".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl,550,550);
                $("#img_id").hide("slow"); 
                
                $("#img_id").attr("src",".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl);
                $("#hotel_name").html(img_List.Rows[Number($("#imgIndex").val())-1].cHotelName);
                $("#room_name").html(img_List.Rows[Number($("#imgIndex").val())-1].cTitle);
                
                $("#img_id").fadeIn("slow");
                
                
                DrawImage(".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl,550,550);
                $("#img_id").attr("src",".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl);
            }
        });
        //大图=======下一张
        $("#xia").click(function(){
            if($("#imgIndex").val()==img_List.Rows.length)
            {
                alert("已是最后一张");
            }
            else
            {
                $("#imgIndex").val(Number($("#imgIndex").val())+1);
                DrawImage(".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl,550,550);
                
                $("#img_id").hide("slow");
                
                
                $("#img_id").attr("src",".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl);
                $("#hotel_name").html(img_List.Rows[Number($("#imgIndex").val())-1].cHotelName);
                $("#room_name").html(img_List.Rows[Number($("#imgIndex").val())-1].cTitle);
                
                $("#img_id").fadeIn("slow"); 
                
                DrawImage(".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl,550,550);
                $("#img_id").attr("src",".."+img_List.Rows[Number($("#imgIndex").val())-1].cDaUrl);
            }
        });
        
        //小图=================================================================================================================上一张
        $("#x_shang").click(function(){
            img_Array=new Array();
            var num=0;
            for(var i=0; i<img_List.Rows.length; i=i+8)
            {
                var nr="";
                for(var j=0; j<8; j++)
                {
                    if((num*8)+j < img_List.Rows.length)
                    {
                        nr+= img_List.Rows[(num*8)+j].cXiaoUrl + "|" + img_List.Rows[(num*8)+j].cDaUrl + "*"
                    }
                }
                img_Array[num]=nr.substring(0,nr.length-1);
                num++;
            }
            if($("#imgXtIndex").val()==1)
            {
            }
            else
            {
                $("#imgXtIndex").val(Number($("#imgXtIndex").val())-1);
                
                //alert($("#imgXtIndex").val());
                $("#xt_div").empty();
                var _html="";
                var xx=img_Array[Number($("#imgXtIndex").val())-1].split("*")
                for(var j=0; j<xx.length; j++)
                {
                    _html+="<table class=\"img_t\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
                    _html+="<tr><td align=\"center\" valign=\"middle\"><img src=\"..";
                    _html+=xx[j].split("|")[0];
                    _html+="\" align=\"absmiddle\" style=\"cursor: pointer;\" onload=\"yasuo(this)\" name=\""+xx[j].split("|")[1]+"\" /></td></tr>";
                    _html+="</table>";            
                }
                $("#xt_div").append(_html);
                
                $("#xt_div").hide();
                $("#xt_div").fadeIn();
                
                $("#xt_div").find("table").each(function(){
                    $(this).find("tr").find("td").find("img").click(function(){
                       //alert( $(this).attr("name"));
                       for(var i=0; i<img_List.Rows.length; i++)
                       {
                            if(img_List.Rows[i].cDaUrl == $(this).attr("name"))
                            {
                                $("#imgIndex").val(i+1);
                                
                                $("#img_id").hide("slow");
                                
                                
                                $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                                $("#hotel_name").html(img_List.Rows[i].cHotelName);
                                $("#room_name").html(img_List.Rows[i].cTitle);
                                
                                $("#img_id").fadeIn("slow"); 
                                
                                DrawImage(".."+img_List.Rows[i].cDaUrl,550,550);
                                $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                                
                            }
                       }
                       
                    });
                });
            }
        });
        //小图====================================================================================================================================下一张
        $("#x_xia").click(function(){
            img_Array=new Array();
            var num=0;
            for(var i=0; i<img_List.Rows.length; i=i+8)
            {
                var nr="";
                for(var j=0; j<8; j++)
                {
                    if((num*8)+j < img_List.Rows.length)
                    {
                        nr+= img_List.Rows[(num*8)+j].cXiaoUrl + "|" + img_List.Rows[(num*8)+j].cDaUrl + "*"
                    }
                }
                img_Array[num]=nr.substring(0,nr.length-1);
                num++;
            }
            
            if($("#imgXtIndex").val()==img_Array.length)
            {
            }
            else
            {
                $("#imgXtIndex").val(Number($("#imgXtIndex").val())+1);
                
                //alert($("#imgXtIndex").val());
                $("#xt_div").empty();
                var _html="";
                var xx=img_Array[Number($("#imgXtIndex").val())-1].split("*")
                for(var j=0; j<xx.length; j++)
                {
                    _html+="<table class=\"img_t\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
                    _html+="<tr><td align=\"center\" valign=\"middle\"><img src=\"..";
                    _html+=xx[j].split("|")[0];
                    _html+="\" align=\"absmiddle\" style=\"cursor: pointer;\" onload=\"yasuo(this)\" name=\""+xx[j].split("|")[1]+"\" /></td></tr>";
                    _html+="</table>";            
                }
                $("#xt_div").append(_html);
                
                $("#xt_div").hide();
                $("#xt_div").fadeIn();
                
                $("#xt_div").find("table").each(function(){
                    $(this).find("tr").find("td").find("img").click(function(){
                       //alert( $(this).attr("name"));
                       for(var i=0; i<img_List.Rows.length; i++)
                       {
                            if(img_List.Rows[i].cDaUrl == $(this).attr("name"))
                            {
                                $("#imgIndex").val(i+1);
                                
                                $("#img_id").hide("slow");
                                
                                
                                $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                                $("#hotel_name").html(img_List.Rows[i].cHotelName);
                                $("#room_name").html(img_List.Rows[i].cTitle);
                                
                                $("#img_id").fadeIn("slow"); 
                                
                                DrawImage(".."+img_List.Rows[i].cDaUrl,550,550);
                                $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                                
                            }
                       }
                       
                    });
                });
                
            
            }
            //======================================================
            
            
        });
     }
     
    
}); 
//==========================================================================
//==========================================================================
//==========================================================================
//==========================================================================
//==========================================================================
var img_List = new Object();
function BangDingTuPian()
{
    img_List = Page_HotelShow.getHotelImg($("#imgShow_Hotel_id").val(),$("#imgShow_City_id").val()).value; 
    
    if(img_List != null && img_List.Rows.length>0)
    {
        //绑定第一张图片==========
        DrawImage(".."+img_List.Rows[0].cDaUrl,550,550);
        $("#img_id").attr("src",".."+img_List.Rows[0].cDaUrl);
        $("#hotel_name").html(img_List.Rows[0].cHotelName);
        $("#room_name").html(img_List.Rows[0].cTitle);
        $("#img_dedai").hide();
        $("#img_id").fadeIn("slow"); 
        $("#imgIndex").val("1");
        
        //绑定小图前8张小图
        img_Array=new Array();
        var num=0;
        for(var i=0; i<img_List.Rows.length; i=i+8)
        {
            var nr="";
            for(var j=0; j<8; j++)
            {
                if((num*8)+j < img_List.Rows.length)
                {
                    nr+= img_List.Rows[(num*8)+j].cXiaoUrl + "|" + img_List.Rows[(num*8)+j].cDaUrl + "*"
                }
            }
            img_Array[num]=nr.substring(0,nr.length-1);
            num++;
        }
        
        //======================================================
        $("#xt_div").empty();
        var _html="";
        var xx=img_Array[0].split("*")
        for(var j=0; j<xx.length; j++)
        {
            _html+="<table class=\"img_t\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
            _html+="<tr><td align=\"center\" valign=\"middle\"><img src=\"..";
            _html+=xx[j].split("|")[0];
            _html+="\" align=\"absmiddle\" style=\"cursor: pointer;\" onload=\"yasuo(this)\" name=\""+xx[j].split("|")[1]+"\" /></td></tr>";
            _html+="</table>";            
        }
        $("#xt_div").append(_html);
        $("#imgXtIndex").val("1");
        
        
        //绑定小图单击事件
        $("#xt_div").find("table").each(function(){
            $(this).find("tr").find("td").find("img").click(function(){
               //alert( $(this).attr("name"));
               for(var i=0; i<img_List.Rows.length; i++)
               {
                    if(img_List.Rows[i].cDaUrl == $(this).attr("name"))
                    {
                        $("#imgIndex").val(i+1);
                        
                        $("#img_id").hide("slow");
                        
                        
                        $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                        $("#hotel_name").html(img_List.Rows[i].cHotelName);
                        $("#room_name").html(img_List.Rows[i].cTitle);
                        
                        $("#img_id").fadeIn("slow"); 
                        
                        DrawImage(".."+img_List.Rows[i].cDaUrl,550,550);
                        $("#img_id").attr("src",".."+img_List.Rows[i].cDaUrl);
                        
                    }
               }
               
            });
        });
        
    }
    else
    {
        alert("暂无本店照片！");
    }
}

//图片等比例压缩==========================================================================
function DrawImage(ImgUrl,iwidth,iheight)
{
    
    //参数(图片,允许的宽度,允许的高度)
    var image=new Image();
    image.src=ImgUrl;
    
//    alert("原"+image.width+","+image.height)
    if(image.width>0 && image.height>0)
    {
        if(image.width/image.height>= iwidth/iheight)
        {
            if(image.width>iwidth)
            {  
                image.width = iwidth; 
                image.height = ((image.height*iwidth)/image.width); 
            }
            else
            {
                image.width = image.width; 
                image.height = image.height; 
            }
        }
        else
        {
            if(image.height>iheight)
            {  
                 image.height = iheight;
                 image.width = (image.width*iheight)/image.height;        
            }
            else
            {
                image.width = image.width; 
                image.height = image.height; 
            }
        }
//        alert("压"+image.width+","+image.height)
        $("#img_id").attr("width",image.width);//width(image.width);
        $("#img_id").attr("height",image.height);//height(image.height);
        //$("#img_id").attr("src",image.src);
        
    }
} 
//图片等比例压缩====================================小图======================================
function yasuo(this_img)
{
    
    var image=new Image();
    image.src=this_img.src;
    
    if(image.width>0 && image.height>0)
    {
        if(image.width/image.height>= 52/52)
        {
            if(image.width>52)
            {  
                this_img.width = 52; 
                this_img.height = ((image.height*52)/image.width); 
            }
            else
            {
                this_img.width = image.width; 
                this_img.height = image.height; 
            }
        }
        else
        {
            if(image.height>52)
            {  
                 this_img.height = 52;
                 this_img.width = (image.width*52)/image.height;        
            }
            else
            {
                this_img.width = image.width; 
                this_img.height = image.height; 
            }
        }
    }
}