/**
 * @author tank
 * @date 2010/04/29
 * @desc 图片轮转
 */
(function($) {
    $.fn.wcimageshow = function(options) {
        var defaults = {
            //使用说明
            //images为传入图片信息,如图片地址,图片标题,图片链接等并且根据type的不同而有相应不同的参数,格式见下
            //type为类型,可用值为big(是日精选,默认),bigwithopacity(今日必睇),small(相片库和世杯图集)
            //type为big时, images格式[{large_path:"", caption:""},...]
            //type为bigwithopacity时,images格式[{thumb_path:"", url:"", caption:""}, ...]
            //type为small时,images格式[{thumb_path:"",large_path"",caption:""}, ...]
            //index为图片索引,默认为第一张
            images: [], imagesicon: [], type: "big", index: 1
        };
        var opts = $.extend(defaults, options);
        return this.each(function() {
            var obj = $(this);
            var imageSize = opts.images.length;
            var imageList = opts.images;
            var icon = opts.imagesicon;
            var imageOffset = 0;
            var imageIndex = opts.index;
            var index = 0;
            if (imageSize == 0) {
                return;
            }

            switch (opts.type) {
                case "big":
                    var width = 520, height = 390, iconW = 17, iconH = 34;
                    var firstImagePath = imageList[0].large_path, firstImageCaption = imageList[0].caption;
                    $("<div/>").appendTo(obj).attr("id", "bigbox").addClass("bigbox").css({ "width": width });
                    $("<div/>").appendTo("#bigbox").attr("id", "bigboxcenter").addClass("bigboxcenter");
                    $("<div/>").appendTo("#bigboxcenter").attr("id", "bigboxcaption").addClass("bigboxcaption").css({"margin-bottom":"3px","width": width });
                    $("<ul/>").appendTo("#bigboxcenter").attr("id", "bigImgList").addClass("bigImgList").css("width", width * imageSize);
                    addRollBtn("bigbox", "bigboxleft", "bigboxright", iconW, iconH, height);
                    //处理单张图片
                    if (imageSize == 1) {
                        $("<li/>").appendTo("#bigImgList").append("<img src='" + firstImagePath + "' style='width:" + width + "px;height:" + height + "px;'");
                        $("#bigboxcaption").html(firstImageCaption);
                        $("<div/>").appendTo(obj).css("clear", "both");
                        return;
                    }
                    //处理多张图片											
                    $("#bigboxcaption").html(imageList[imageIndex - 1].caption);
                    fillImg("bigImgList", width, height, false);
                    rollIconState("bigboxleft", "bigboxright");
                    addAnimate("bigboxleft", "bigboxright", "bigImgList", width);
                    $("<div/>").appendTo(obj).css("clear", "both");
                    break;
                case "attn":
                case "bigwithopacity":
                    if(opts.type=="attn")
                    {
                        $(".newsText").css("margin-left","0");
                        $(obj).css({"width":"600px","position":"relative","padding-top":"10px"});
                        $("<div/>").appendTo(obj).attr("id", "bigimgbox").css({ "width": "600px","height":"338px","margin":"0 auto","overflow":"hidden","cursor":"pointer" });
                        $("<div/>").appendTo(obj).attr("id", "imgcaption").css({"width":"100%","margin":"5px 0"});
                        $("<div/>").appendTo("#imgcaption").attr("id", "divcaption").css({"float":"left","width":"80%"});
                        $("<div/>").appendTo("#imgcaption").attr("id", "divimgcount").css({"float":"right","width":"20%","text-align":"right"});
                        $("<img/>").appendTo("#bigimgbox").attr("id", "bigimg").load(function() {
       	                                var img = new Image();
                                        img.src = $(this).attr("src");
                                        var width = img.width, height = img.height;
                                        if(width*338 > height*600) //图片宽高比大于div的宽高比
                                        {
                                            if(width>600)  //将宽度缩到dWidth
                                            {
                                                height = height*600/width;
                                                width=600;
                                            }
                                        }
                                        else if(height>338)  //将高度缩到dHeight
                                        {
                                            width = width*338/height;
                                            height = 338;
                                        }
                                        if(height<338) $(this).css("margin-top",(338-height)/2+"px");
                                        $(this).animate({ "width": width + "px", "height": height + "px" }, 200);
                                        $(this).parent().animate({ "width": width + "px", "height": "338px" }, 200);

                                    }).attr('src', imageList[0].large_path);
                                    $("#divcaption").html(imageList[0].caption.length > 40 ? imageList[0].caption.substring(0, 40) + "..." : imageList[0].caption);
                        $("#divimgcount").html("Image 1 of "+imageList.length);
//                        $("<div/>").appendTo("#divattn").attr("id", "descOpacity");
//                        $("<div/>").appendTo("#divattn").attr("id", "descContent");
//                        $("<div/>").appendTo("#descContent").attr("id", "desctitle").css({"margin":"10px 24px 10px 24px","color":"yellow"}).html(imageList[0].caption);
                    }
                    var width = 125, height = 70, margin = 10, iconW = 24, iconH = 24;
                    $("<div/>").appendTo(obj).attr("id", "bottombox").css({ "width": "100%","padding-top":"10px","margin-bottom": "10px","background-color":"#d1d1d1","clear":"both" });
                    $("<div/>").appendTo("#bottombox").attr("id", "bottomwpbox").css({ "width": "100%","height":"80px" });
                    $("<div/>").appendTo("#bottomwpbox").attr("id", "bigwpbox").addClass("bigwpbox").css({ "width": 4 * width + 3 * margin });
                    $("<ul/>").appendTo("#bigwpbox").attr("id", "bigwpImgList").addClass("bigwpImgList").css({ "width": width * imageSize + margin * imageSize });
                    addRollBtn("bigwpbox", "bigwpboxleft", "bigwpboxright", iconW, iconH, height);
                    fillImg("bigwpImgList", width, height, true);
                    if (imageSize > 4) {
                        rollIconState("bigwpboxleft", "bigwpboxright");
                        addAnimate("bigwpboxleft", "bigwpboxright", "bigwpImgList", width + margin);
                    }
                    $("<div/>").appendTo(obj).css("clear", "both");
                    break;
                case "small":
                    var width = 125, height = 70, margin = 10, iconW = 9, iconH = 24;
                    $("<div/>").appendTo(obj).attr("id", "smallbox").addClass("smallbox").css({ "width": 2 * width + margin });
                    $("<div/>").appendTo(obj).attr("id", "smallboxpop").css({ "width": "1px", "height": "1px", "overflow": "hidden" });
                    $("<ul/>").appendTo("#smallbox").attr("id", "smallImgList").addClass("smallImgList").css({ "width": width * imageSize + margin * imageSize });
                    addRollBtn("smallbox", "smallboxleft", "smallboxright", iconW, iconH, height);
                    fillImg("smallImgList", width, height, true);
                    if (imageSize > 2) {
                        rollIconState("smallboxleft", "smallboxright");
                        addAnimate("smallboxleft", "smallboxright", "smallImgList", width + margin);
                    }
                    $("<div/>").appendTo(obj).css("clear", "both");
                    break;
            }

            /**
            * 添加导航按钮
            * @param {Object} boxName 容器元素
            * @param {Object} left 左导航名
            * @param {Object} right 右导航名
            */
            function addRollBtn(boxName, left, right, width, iconH, height) {
                $("<div/>").insertBefore("#" + boxName).attr("id", left).addClass("roll").css({ "width": width + 10, "height": height });
                $("<div/>").insertAfter("#" + boxName).attr("id", right).addClass("roll").css({ "width": width, "height": height });
                switch (opts.type) {
                    case "big":
                        if (imageSize > 1) {
                            $("<img/>").appendTo("#" + left).attr("src", icon[0]);
                            $("<img/>").appendTo("#" + right).attr("src", icon[1]);
                        }
                        $("#" + left + " img").css("margin-left", -6);
                        $("#" + right + " img").css("margin-left", 12);
                        break;
                    case "attn":
                        if (imageSize > 4) {
                            $("<img/>").appendTo("#" + left).attr("src", icon[0]);
                            $("<img/>").appendTo("#" + right).attr("src", icon[1]);
                        }
                        $("#" + left + " img").css("margin-left", 4);
                        $("#" + right + " img").css("margin-left", 6);
                        break;
                    case "bigwithopacity":
                        if (imageSize > 4) {
                            $("<img/>").appendTo("#" + left).attr("src", icon[0]);
                            $("<img/>").appendTo("#" + right).attr("src", icon[1]);
                        }
                        $("#" + left + " img").css("margin-left", -2);
                        $("#" + right + " img").css("margin-left", 8);
                        break;
                    case "small":
                        if (imageSize > 2) {
                            $("<img/>").appendTo("#" + left).attr("src", icon[0]);
                            $("<img/>").appendTo("#" + right).attr("src", icon[1]);
                        }
                        $("#" + left + " img").css("margin-left", 0);
                        $("#" + right + " img").css("margin-left", 6);
                        break;
                }
                $("#" + left + " img,#" + right + " img").css({ "margin-top": height / 2 - iconH / 2 });
            }

            /**
            * 填充图片
            * @param {Object} listBox 图片容器
            * @param {Object} width 图片宽度
            * @param {Object} height 图片高度
            * @param {Object} isThumb 是否小图模式
            */
            function fillImg(listBox, width, height, isThumb) {
                $.each(imageList, function(i, item) {
                    $("#" + listBox).append("<li id='" + listBox + i + "'/>");
                    if (isThumb) {
                        if(opts.type=="attn"){
                            $("#" + listBox+i).css({"width":width+"px","height":height+"px","background-color":"#d1d1d1","overflow":"hidden"});
                            $("<a />").appendTo("#" + listBox + i).attr({"id":"link"+i,"name":item.large_path,"title":item.caption});
                            $("<img />").appendTo("#link" + i).attr("id", "img"+i).load(function() {
                            var imga = new Image();
                            imga.src = $(this).attr("src");
                            var w=imga.width;
                            var h=imga.height;
                            if(w*height > h*width){
                                if(w>width){
                                    h = h*width/w;
                                    w=width;
                                }
                            }
                            else if(h>height){
                                w = w*height/h;
                                h = height;
                            }
                            if(h<height) $(this).css("margin-top",(height-h)/2+"px");
                            if(w<width) $(this).css("margin-left",(width-w)/2+"px");
                            $(this).css({"width":w+"px","height":h+"px","cursor":"pointer"});
                            }).attr("src",item.thumb_path);
                        }
                        else {
                            $("<img />").appendTo("#" + listBox + i).attr("src", item.thumb_path).css({
                                "width": width,
                                "height": height,
                                "cursor": "pointer"
                            });
                        }
                        switch (opts.type) {
                            case "attn":
                                $("#img" + i).click(function() {
                                    $("#bigimg").load(function() {
       	                                var img = new Image();
                                        img.src = $(this).attr("src");
                                        var width = img.width, height = img.height;
                                        if(width*338 > height*600) //图片宽高比大于div的宽高比
                                        {
                                            if(width>600)  //将宽度缩到dWidth
                                            {
                                                height = height*600/width;
                                                width=600;
                                            }
                                        }
                                        else if(height>338)  //将高度缩到dHeight
                                        {
                                            width = width*338/height;
                                            height = 338;
                                        }
                                        $(this).animate({ "width": width + "px", "height": height + "px" }, 200);
                                        $(this).parent().animate({ "width": width + "px", "height": "338px" }, 200);
                                       
                                    }).attr('src', item.large_path);
                                    $("#divcaption").html(item.caption.length > 40 ? item.caption.substring(0, 40) + "..." : item.caption);
                                    $("#divimgcount").html("Image "+(i+1)+" of "+imageList.length);
                                    img_b_index=i;//ascx里定义的全局变量，用来找到当前大图在该组图片的索引
                                });
                                break;
                            case "bigwithopacity":
                                $("<div />").appendTo("#" + listBox + i).html(item.caption).css({ "font-size": "12px", "width": width, "cursor": "pointer", "padding-top": "3px" }).hover(function() { $(this).css("color", "#f60") }, function() { $(this).css("color", "#000") });
                                $("#" + listBox + i).click(function() {
                                    window.location.href = item.url;
                                });
                                break;
                            case "small":
                                $("<a />").appendTo("#smallboxpop").attr({ "href": item.large_path, "title": item.caption, "class": "thickbox", "rel": "bigImageGroup" });
                                $("<div />").appendTo("#" + listBox + i).html(item.caption).css({ "font-size": "12px", "width": width, "cursor": "pointer", "padding-top": "3px" }).hover(function() { $(this).css("color", "#f60") }, function() { $(this).css("color", "#000") });
                                $("#" + listBox + i).click(function() {
                                    index = i;
                                    tb_init("#smallboxpop a", index);
                                    return false;
                                });
                        }
                    } else {
                        $("<img />").appendTo("#" + listBox + i).attr("src", item.large_path);
                        $("#" + listBox + i).css({ "width": width, "text-align": "center", "overflow": "hidden" });
                        if (imageIndex > 1) {
                            imageOffset = -(imageIndex - 1) * width
                            $("#" + listBox).css("left", imageOffset);
                        }
                    }
                });
            }

            /**
            * 根据滚动状态来隐藏显示左右按钮
            * @param {string} left 左导航按钮
            * @param {string} right 右导航按钮
            */
            function rollIconState(left, right) {
                if (imageIndex == 1) {
                    $("#" + left + " img").hide();
                    $("#" + right + " img").show();
                } else {
                    $("#" + left + " img").show();
                    $("#" + right + " img").show();
                }
                switch (opts.type) {
                    case "big":
                        if (imageIndex == imageSize) {
                            $("#" + left + " img").show();
                            $("#" + right + " img").hide();
                        }
                        break;
                    case "attn":
                    case "bigwithopacity":
                        if (imageIndex == imageSize - 3) {
                            $("#" + right + " img").hide();
                            $("#" + left + " img").show();
                        }
                        break;
                    case "small":
                        if (imageIndex == imageSize - 1) {
                            $("#" + left + " img").show();
                            $("#" + right + " img").hide();
                        }
                        break;
                }
            }

            /**
            * 添加滚动动画
            * @param {string} leftBtn 左导航按钮
            * @param {string} rightBtn 右导航按钮
            * @param {string} listBox 图片容器
            * @param {int} width 图片宽度
            */
            function addAnimate(leftBtn, rightBtn, listBox, width) {
                $("#" + leftBtn + " img").click(function() {
                    if (imageOffset == 0) {
                        return;
                    }
                    imageOffset += width;
                    imageIndex--;
                    rollIconState(leftBtn, rightBtn);
                    $("#" + listBox).animate({
                        left: imageOffset + "px"
                    }, "slow");
                    switch (opts.type) {
                        case "big":
                            $("#bigboxcaption").html(imageList[imageIndex - 1].caption);
                            break;
                    }
                });
                $("#" + rightBtn + " img").click(function() {
                    var allWidthOffset = width * imageSize;
                    imageIndex++;
                    rollIconState(leftBtn, rightBtn);
                    switch (opts.type) {
                        case "big":
                            $("#bigboxcaption").html(imageList[imageIndex - 1].caption);
                            if ((allWidthOffset + imageOffset) == width) {
                                return;
                            }
                            break;
                        case "attn":
                        case "bigwithopacity":
                            if ((allWidthOffset + imageOffset) == width * 4) {
                                return;
                            }
                            break;
                        case "small":
                            if ((allWidthOffset + imageOffset) == width * 2) {
                                return;
                            }
                            break;
                    }
                    imageOffset -= width;
                    $("#" + listBox).animate({
                        left: imageOffset + "px"
                    }, "slow");
                });
            }
        });
    };
})(jQuery);